我正在固定一个下拉框的宽度(是的,我知道这样做存在跨浏览器问题)。
有没有一种非js的方法来切断溢出的文本并附加省略号?text-overflow:省略号不适用于<select>元素(至少在Chrome中)。
<select>
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>
HTML在表单控件中指定的内容非常有限。这就为操作系统和浏览器制造商留下了做他们认为合适的空间(例如,iPhone的模式select,当打开时,它看起来与传统的弹出菜单完全不同)。
select
看起来大多数操作系统都将所选选项切掉而没有省略号。如果您能够更改截断文本的方式,那么它看起来会很奇怪,因为这不是选择框在其余操作系统中的工作方式。
如果您遇到问题,可以使用可定制的替换项,例如Chosen,它看起来与native不同select。
或者,针对主要操作系统或浏览器提交错误。就我们所知,以selects 截断文本的方式可能是每个人都进行了多年的监督的结果,并且可能是时候进行更改了。