Chrome 搜索功能 (ctrl+f) 查找隐藏文本（但它是不可见的！）

Question

看看这个fiddle。

输入 Ctrl+F 并搜索“gets” ...

对于我来说，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 的右侧和/或左侧，或右侧的内侧（带有更高的 @ 987654330@）等：

• Detect if text has overflown