Функция поиска Chrome (ctrl + f) находит скрытый текст (но он невидим!)

Посмотрите на fiddle.

Введите Ctrl + F и выполните поиск "получает"...

Для меня Chrome находит невидимый текст из этого текста: A long option that gets cut off

Он воспроизводится на Linux/Ubuntu 12.04 Chrome версии 31.0.1650.63

HTML

<!--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>

CSS

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

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

Как показать текст, когда он найден на странице, а не пустой фрагмент пробелов, выделенный браузером?

Ответы

Ответ 1

К сожалению, это известная ошибка в Chrome.

Отчеты об ошибках:

Это происходит из-за text-overflow: ellipsis; отчета об ошибке.

Нет решения проблемы с 2010 года!

Избегайте проблем...

Это не так красиво, но оно работает в свете известной проблемы:

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

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

Fiddle: http://jsfiddle.net/digitalextremist/t5eUe/228/

enter image description here

Или обойти его...

Используйте JavaScript для обнаружения переполнения и вставьте эллипсис самостоятельно, как изображение (или блок текста) справа и/или слева от div, или с внутренней стороны правой стороны (с более высоким z-index) и т.д.: