Еліпсис для переповнення тексту у випадаючих полях

Я фіксую ширину одного зі своїх випадаючих вікон (так, я знаю, що при цьому виникають проблеми з переглядачами).

Чи існує не-js спосіб вирізати переповнений текст і додати еліпси? переповнення тексту: еліпсис не працює для <select>елементів (принаймні в Chrome).

select, div {
    width:100px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
}

<!--works for a div-->
<div>
    A long option that gets cut off
</div>

<!--but not for a select-->
<select>
    <option>One - A long option that gets cut off</option>
    <option>Two - A long option that gets cut off</option>
</select>

Приклад тут: http://jsfiddle.net/t5eUe/

ПРИМІТКА. Станом на липень 2020 року text-overflow: ellipsisпрацює для <select>Chrome

HTML обмежений тим, що він визначає для елементів керування формою. Це залишає простір для виробників операційних систем та браузерів робити те, що вони вважають за доцільне на цій платформі (наприклад, модальний пристрій iPhone, selectякий у відкритому вигляді абсолютно не схожий на традиційне спливне меню).

Якщо це змушує вас, ви можете скористатися настроюваною заміною, такою як Chosen , яка зовні відрізняється від рідної select.

Або подайте помилку на основну операційну систему або браузер. Наскільки нам відомо, спосіб обрізання тексту в selects може бути результатом багаторічного недогляду, який усі скопіювали, і це може бути час для змін.

Якщо ви знайшли це запитання, оскільки на вашому полі вибору є спеціальна стрілка, а текст переходить до вашої стрілки, я знайшов рішення, яке працює в деяких браузерах. Просто додайте трохи пробивок selectз правого боку.

До:

Після:

CSS:

select {
    padding:0 30px 0 10px !important;
    -webkit-padding-end: 30px !important;
    -webkit-padding-start: 10px !important;
}

iOS ігнорує paddingвластивості, але -webkit-замість них використовує властивості.

http://jsfiddle.net/T7ST2/4/

Найпростішим рішенням може бути обмеження кількості символів у самому HTML. Rails має усічку (рядок, довжина) помічник , і я впевнений, що будь-який сервер, який ви використовуєте, забезпечує щось подібне.

Через проблеми з переглядачем, які ви вже знайомі щодо ширини вікон для вибору, мені здається, це найпростіший і найменш схильний до помилок варіант.

<select>
  <option value="1">One</option>
  <option value="100">One hund...</option>
<select>

Ви можете використовувати це:

select {
    width:100px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
}
select option {
    width:100px;
    text-overflow:ellipsis;
    overflow:hidden;
}
div {
    border-style:solid; 
    width:100px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
}

Знайшов цей абсолютний хак, який насправді працює досить добре:

https://codepen.io/nikitahl/pen/vyZbwR

Не лише CSS.

Основна суть полягає в тому, щоб у випадаючому списку був контейнер .select-container. Цей контейнер ::beforeналаштований для відображення contentна основі його data-contentатрибута / набору даних, а також усіх параметрів overflow:hidden; text-overflow: ellipsis;та розмірів, необхідних для роботи еліпсиса.

Коли вибір змінюється, javascript присвоює значення (або ви можете отримати текст опції зі select.optionsсписку) набору даних. Вміст контейнера та voila!

Копіювання вмісту codepen тут:

var selectContainer = document.querySelector(".select-container");
var select = selectContainer.querySelector(".select");
select.value = "lingua latina non penis canina";

selectContainer.dataset.content = select.value;

function handleChange(e) {
  selectContainer.dataset.content = e.currentTarget.value;
  console.log(select.value);
}

select.addEventListener("change", handleChange);

span {
  margin: 0 10px 0 0;
}

.select-container {
  position: relative;
  display: inline-block;
}

.select-container::before {
  content: attr(data-content);
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  left: 0;
  padding: 7px;
  font: 11px Arial, sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-transform: capitalize;
  pointer-events: none;
}

.select {
  width: 80px;
  padding: 5px;
  appearance: none;
  background: transparent url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png") no-repeat calc(~"100% - 5px") 7px;
  background-size: 10px 10px;
  color: transparent;
}

.regular {
  display: inline-block;
  margin: 10px 0 0;
  .select {
    color: #000;
  }
}

<span>Hack:</span><div class="select-container" data-content="">
  <select class="select" id="words">
    <option value="lingua latina non penis canina">Lingua latina non penis canina</option>
    <option value="lorem">Lorem</option>
    <option value="ipsum">Ipsum</option>
    <option value="dolor">Dolor</option>
    <option value="sit">Sit</option>
    <option value="amet">Amet</option>
    <option value="lingua">Lingua</option>
    <option value="latina">Latina</option>
    <option value="non">Non</option>
    <option value="penis">Penis</option>
    <option value="canina">Canina</option>
  </select>
</div>
<br />

<span>Regular:</span>
<div class="regular">
  <select style="width: 80px;">
    <option value="lingua latina non penis canina">Lingua latina non penis canina</option>
    <option value="lorem">Lorem</option>
    <option value="ipsum">Ipsum</option>
    <option value="dolor">Dolor</option>
    <option value="sit">Sit</option>
    <option value="amet">Amet</option>
    <option value="lingua">Lingua</option>
    <option value="latina">Latina</option>
    <option value="non">Non</option>
    <option value="penis">Penis</option>
    <option value="canina">Canina</option>
  </select>
</div>

quirksmode має хороший опис властивості 'text-overflow', але можливо вам доведеться застосувати деякі додаткові властивості, такі як 'white-space: nowrap'

Хоча я не на 100%, як це буде поводитися у вибраному об’єкті, варто спробувати спробувати це спочатку:

http://www.quirksmode.org/css/textoverflow.html

Файл CSS

.selectDD {
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;     
}

Файл JS

$(document).ready(function () {
    $("#selectDropdownID").next().children().eq(0).addClass("selectDD");
});

Ви можете використовувати цю функцію jQuery замість додаткової підказки Bootstrap

function DDLSToolTipping(ddlsArray) {
    $(ddlsArray).each(function (index, ddl) {
        DDLToolTipping(ddl)
    });
}

function DDLToolTipping(ddlID, maxLength, allowDots) {
    if (maxLength == null) { maxLength = 12 }
    if (allowDots == null) { allowDots = true }

    var selectedOption = $(ddlID).find('option:selected').text();

    if (selectedOption.length > maxLength) {
        $(ddlID).attr('data-toggle', "tooltip")
                .attr('title', selectedOption);

        if (allowDots) {
            $(ddlID).prev('sup').remove();
            $(ddlID).before(
            "<sup style='font-size: 9.5pt;position: relative;top: -1px;left: -17px;z-index: 1000;background-color: #f7f7f7;border-radius: 229px;font-weight: bold;color: #666;'>...</sup>"
               )
        }
    }

    else if ($(ddlID).attr('title') != null) {
        $(ddlID).removeAttr('data-toggle')
                .removeAttr('title');
    }
}

Я використав цей підхід у недавньому проекті і був дуже задоволений результатом:

.select-wrapper {
    position: relative;
    &::after {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 100%;
        content: "";
        background: linear-gradient(to right, transparent, white);
        pointer-events: none;
    }
}

В основному, оберніть виділене у div та вставте псевдоелемент, щоб накласти кінець тексту, щоб створити вигляд, що текст зникає.