Chrome搜索功能(ctrl + f)可查找隐藏的文字(但它不可见!) [英] 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?
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/
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:
这篇关于Chrome搜索功能(ctrl + f)可查找隐藏的文字(但它不可见!)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!