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

Question

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

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

есть ли не-js способ отрезать переполненный текст и добавить эллипсы? text-overflow: многоточие не работает для <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/

470 8

html css

8 ответов:

Comments

Ничего не найдено.

s4y · Accepted Answer · 2016-02-17 05:09:45

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

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

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

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

Alex W · Accepted Answer · 2016-05-31 14:12:06

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

pbyrne · Accepted Answer · 2011-09-05 05:02:20

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

из-за проблем с кросс-браузером, с которыми вы уже знакомы относительно ширины полей выбора, это кажется мне самым простым и наименее подверженным ошибкам вариантом.
<select>
  <option value="1">One</option>
  <option value="100">One hund...</option>
<select>

Hariharasudan · Accepted Answer · 2015-06-12 09:16:18

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

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

dougajmcdonald · Accepted Answer · 2011-09-05 16:09:56

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

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

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

Mohammad Abdalhaleem · Accepted Answer · 2016-03-15 16:16:48

вы можете использовать эту функцию jQuery вместо plus Bootstrap tooltip

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

chri3g91 · Accepted Answer · 2018-06-21 14:10:24

CSS file

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

JS file

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

Anja · Accepted Answer · 2018-07-31 12:37:11

немного упрощенно, но работал для меня на браузерах:
select {
    font-size: 0.9rem;
}