Chrome搜索功能(ctrl + f)会找到隐藏的文字(但它不可见!)

Question

看看这个小提琴.

输入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右侧和/或左侧的图像(或文本块),或右侧内侧(带有更高z-index)等等:

• 检测文本是否已溢出