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

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在固定一个下拉框的宽度（是的，我知道这样做存在跨浏览器问题）。

有没有一种非js的方法来切断溢出的文本并附加省略号？text-overflow：省略号不适用于<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>

回答：

HTML在表单控件中指定的内容非常有限。这就为操作系统和浏览器制造商留下了做他们认为合适的空间（例如，iPhone的模式select，当打开时，它看起来与传统的弹出菜单完全不同）。

看起来大多数操作系统都将所选选项切掉而没有省略号。如果您能够更改截断文本的方式，那么它看起来会很奇怪，因为这不是选择框在其余操作系统中的工作方式。

如果您遇到问题，可以使用可定制的替换项，例如Chosen，它看起来与native不同select。

或者，针对主要操作系统或浏览器提交错误。就我们所知，以selects 截断文本的方式可能是每个人都进行了多年的监督的结果，并且可能是时候进行更改了。

以上是 下拉框中溢出文本的省略号 的全部内容， 来源链接： utcz.com/qa/419005.html

回到顶部