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?

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. — Albzi, Jan 13 '14 at 14:08
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 — Danield, Jan 13 '14 at 14:36

score 15 · Accepted Answer · edited May 23 '17 at 12:33

15

Unfortunately, this is a known bug in Chrome.

Bug Reports:

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/

enter image description here

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

edited May 23 '17 at 12:33

Community

1
1

answered Jan 13 '14 at 14:06

digitalextremist

5,952
3
43
62

Thanks, actually we cant get the same result by adding display: -webkit-box http://jsfiddle.net/c96jL/ but I need these 3 dots :) – Yurii Buhryn Jan 13 '14 at 14:22
Updated my answer for you, with an unorthodox fix, otherwise you're out of luck @YuriyBugryn – digitalextremist Jan 13 '14 at 14:27
1

Thanks, @digitalextremist. I will use JS for fixing it. – Yurii Buhryn Jan 13 '14 at 14:31
1

Since the chrome bug was closed, I re-opened it at: https://bugs.chromium.org/p/chromium/issues/detail?id=1067893 – ubershmekel Apr 04 '20 at 18:10
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. – SteveExdia Aug 23 '22 at 22:10
@ubershmekel 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. – SteveExdia Aug 23 '22 at 22:14
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? – Hendrik Wiese Jun 08 '23 at 16:44

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

1 Answers1

Unfortunately, this is a known bug in Chrome.

Avoid the problem...

Or work around it...

Linked