看看这个
fiddle.
对于我来说,Chrome从这个文本中发现不可见的文本：一个长期的选项被切断
它在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;
}
解决方法
不幸的是,这是Chrome中一个已知的错误.
错误报告：
> https://bugs.webkit.org/show_bug.cgi?id=93709
> https://code.google.com/p/chromium/issues/detail?id=13563
它发生的原因是文本溢出：省略号;错误报告说.
没有解决的bug,自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来检测溢出,并自动插入一个省略号作为图像(或文本块)在右侧和/或左侧,或右侧内侧(具有较高z指数)等：
