Chrome search feature (ctrl+f) finds hidden text ( but it's invisible! )

Question

Look at this fiddle.

Enter Ctrl+F and search "gets" ...

For me Chrome finds invisible text from this text: A long option that gets cut off

It's reproduced on Linux/Ubuntu 12.04 Chrome Version 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;
}

How do I show the text when it is found on a page, rather than a blank chunk of whitespace, highlighted by the browser?

Answer 1

Unfortunately, this is a known bug in Chrome.

Bug Reports:

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

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

It happens because of text-overflow: ellipsis; the bug report says.

No solution to the bug, since 2010!

---

Avoid the problem...

This is not as pretty, but it works in light of the known issue:

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/

---

Or work around it...

Use JavaScript to detect the overflow, and insert an ellipsis yourself, as an image ( or a block of text ) on the right and/or left of the div, or on the inside of the right side ( with a higher z-index ), etc:

• Detect if text has overflown