我正在修复我的其中一个下拉框的宽度(是的,我知道这样做存在跨浏览器问题)。
是否有非 js 方法来切断溢出文本并附加省略号?文本溢出:省略号不适用于 <select>
元素(至少在 Chrome 中)。
select, div {
width:100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
<!--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>
这里的例子: http://jsfiddle.net/t5eUe/
最佳答案
注意:截至 2020 年 7 月,text-overflow: ellipsis
适用于 <select>
在 Chrome 上
HTML 受限于它为表单控件指定的内容。这为操作系统和浏览器制造商留下了空间,让他们可以在该平台上做他们认为合适的事情(比如 iPhone 的模态 select
,打开时,它看起来与传统的弹出菜单完全不同)。
如果它让您感到厌烦,您可以使用可自定义的替代品,例如 Chosen ,它看起来与原生的不同 select
.
或者,提交针对主要操作系统或浏览器的错误。就我们所知,select
中截断文本的方式这可能是每个人都效仿的多年疏忽的结果,可能是时候做出改变了。
关于html - 下拉框中溢出文本的省略号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7289769/