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

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