Chrome search feature (ctrl+f) finds hidden text ( but it's invisible! )
css, ellipsis, google-chrome, html, styling
Solution
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
Problem
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?