Chrome搜索功能（ctrl + f）会找到隐藏的文字（但它不可见！）

Question

看看这个fiddle。

输入 Ctrl + F 并搜索“获取”......

对我来说，Chrome会在此文中找到不可见的文字：A long option that gets cut off

它在Linux / Ubuntu 12.04 Chrome版本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;
}

如何在页面上显示文本，而不是浏览器突出显示空白的空白块？

Answer 1

不幸的是，这是Chrome中的已知错误。

错误报告：

• https://bugs.webkit.org/show_bug.cgi?id=93709

• https://code.google.com/p/chromium/issues/detail?id=13563

这是因为错误报告中的text-overflow: ellipsis;。

自2010年以来无法解决该问题！

---

避免问题...

这不是很漂亮，但它根据已知问题起作用：

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; */
}

小提琴： http://jsfiddle.net/digitalextremist/t5eUe/228/

---

或者解决它......

使用JavaScript检测溢出，并自己插入省略号，作为div的右侧和/或左侧或右侧内侧的图像（或文本块）（使用更高的{ {1}}）等：

• Detect if text has overflown