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?

Linetta

How do you not see the problem @DoorknobofSnow? It's that ctrl-f finds text that is supposed to be hidden. The question is presumably how to prevent this. – Tetanic

Looks like there are 2 Questions here 1) ctrl + F finds hidden text on a div - but it's invisible (a blank space is highlighted) and 2) ctrl + f doesn't find the hidden text of a selct/options element – Morrissette

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

Gruelling

Thanks, actually we cant get the same result by adding display: -webkit-box jsfiddle.net/c96jL but I need these 3 dots :) – Linetta

Updated my answer for you, with an unorthodox fix, otherwise you're out of luck @YuriyBugryn – Gruelling

Thanks, @digitalextremist. I will use JS for fixing it. – Linetta

Since the chrome bug was closed, I re-opened it at: bugs.chromium.org/p/chromium/issues/detail?id=1067893 – Maryrosemarys

Ironically, this "bug" (anomaly?) is present on every StackOverflow page when you're logged in and try to search for your own username on a page to see if you've already commented on something hahahah. – Blankbook

@Maryrosemarys I was gonna chime in on your bug (which is still Open and untriaged), but that site still prints user emails partially for some unfathomable reason. Why anyone would be OK have even part of their email publicly scannable on a forum like that, I don't know. – Blankbook

13 years and it is still not fixed. I'm losing all hope it ever will. Are there any 3rd party tools to get around it? – Personification