Вопрос по html, ellipsis, google-chrome, css, styling – Функция поиска Chrome (Ctrl + F) находит скрытый текст (но он невидим!)

13

Посмотри на этоиграть на скрипке.

Войти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;
}

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

Похоже, что есть2 вопроса здесь 1) Ctrl + F находит скрытый текст в div - но он невидим (пробел выделен) и 2) Ctrl + Fне находит скрытый текст элемента selct / options Danield
Как вы не видите проблему @DoorknobofSnow? Это тоctrl-f находит текст, который должен быть скрыт Вопрос, по-видимому, как предотвратить это. Albzi

Ваш Ответ

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

https://bugs.webkit.org/show_bug.cgi?id=93709

https://code.google.com/p/chromium/issues/detail?id=13563

Это происходит из-за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; */
}

Скрипки: http://jsfiddle.net/digitalextremist/t5eUe/228/

Или обойти это ...

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

Определить, не переполнен ли текст
Спасибо, @digitalextremist. Я буду использовать JS для исправления. Yurii Buhryn
Спасибо, на самом деле мы не можем получить тот же результат, добавив display: -webkit-boxjsfiddle.net/c96jL но мне нужны эти 3 точки :) Yurii Buhryn
Обновил мой ответ для вас, с неортодоксальным исправлением, иначе вам не повезет @YuriyBugryn digitalextremist

Похожие вопросы