Search code examples
htmlcssgoogle-chromestylingellipsis

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

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?

Solution

  • 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: