16

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?

digitalextremist
  • 5,932
  • 3
  • 41
  • 61
Yurii Buhryn
  • 793
  • 3
  • 8
  • 27
  • 2
    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

1 Answers1

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:

Community
  • 1
  • 1
digitalextremist
  • 5,932
  • 3
  • 41
  • 61