Эллипсис для переполнения текста в раскрывающихся списках

Ответ 1

HTML очень ограничен в том, что он задает для элементов управления формой. Это оставляет возможности для операционных систем и разработчиков браузеров делать то, что, по их мнению, подходит (например, iPhones modal select, который при открытии выглядит полностью отличным от традиционного всплывающего меню).

Похоже, что большинство операционных систем отключили выбранную опцию без elipsis. Если бы вы смогли изменить способ обрезания текста, это выглядело бы странно, потому что это не то, как ячейки выбора работают в остальной части операционной системы.

Если это вас задевает, вы можете использовать настраиваемую замену, например Chosen, которая отличается от нативной select.

Или сообщите об ошибке в отношении основной операционной системы или браузера. Насколько нам известно, текст, отрезанный в select, может быть результатом многолетнего контроля над тем, что все скопировали, и настало время для изменения.

Ответ 2

Если вы находите этот вопрос, потому что у вас есть специальная стрелка в поле выбора и текст переместится по вашей стрелке, я нашел решение, которое работает в некоторых браузерах. Просто добавьте некоторое дополнение к 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/

Ответ 3

Простейшим решением может быть ограничение количества символов в самом HTML. Rails имеет truncate (string, length) помощник, и я уверен, что любой бэкэнд, который вы используете, обеспечивает нечто подобное.

Из-за проблем с кросс-браузером, которые вы уже знаете относительно ширины блоков выбора, мне кажется, что это самый простой и наименее подверженный ошибкам вариант.

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

Ответ 4

Вы можете использовать это:

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;
}

Ответ 5

quirksmode имеет хорошее описание свойства text-overflow, но вам может потребоваться применить дополнительные свойства, такие как "white-space: nowrap"

Пока я не на 100%, как это будет вести себя в выбранном объекте, возможно, стоит попробовать это в первую очередь:

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

Ответ 6

Вы можете использовать эту функцию 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');
    }
}

Ответ 7

Бит упрощен, но работал у меня во всех браузерах:

select { font-size: 0.9rem }