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

如果您发现这个问题是因为您的选择框上有一个自定义箭头并且文本在您的箭头上方，我找到了一个适用于某些浏览器的解决方案。只需向右侧的 select 添加一些填充。

之前:

之后:

CSS:

select {
    padding:0 30px 0 10px !important;
    -webkit-padding-end: 30px !important;
    -webkit-padding-start: 10px !important;
}

iOS 忽略 padding 属性，而是使用 -webkit- 属性。

http://jsfiddle.net/T7ST2/4/