html - 下拉框中溢出文本的省略号

Question

我正在修复我的其中一个下拉框的宽度(是的，我知道这样做存在跨浏览器问题)。

是否有非 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/

Answer 1

注意:截至 2020 年 7 月，text-overflow: ellipsis适用于 <select>在 Chrome 上

HTML 受限于它为表单控件指定的内容。这为操作系统和浏览器制造商留下了空间，让他们可以在该平台上做他们认为合适的事情(比如 iPhone 的模态 select，打开时，它看起来与传统的弹出菜单完全不同)。

如果它让您感到厌烦，您可以使用可自定义的替代品，例如 Chosen ，它看起来与原生的不同 select .

或者，提交针对主要操作系统或浏览器的错误。就我们所知，select 中截断文本的方式这可能是每个人都效仿的多年疏忽的结果，可能是时候做出改变了。