在下拉框中显示溢出文本的省略号 [英] Ellipsis for overflow text in dropdown boxes

问题描述

我正在修复我的下拉框之一的宽度（是的，我知道有这样做的跨浏览器问题）。

I'm fixing the width of one of my dropdown boxes (yes I know there are cross-browser issues with doing this).

js方式切断溢出的文本和追加椭圆？ text-overflow：ellipsis不适用于< select> 元素（至少在Chrome中）。

Is there a non-js way to cut off overflowing text and append ellipses? text-overflow:ellipsis doesn't work for <select> elements (at least in Chrome).

示例：
http://jsfiddle.net/t5eUe/

推荐答案

HTML对于窗体控件指定的内容非常有限。这为操作系统和浏览器制造商提供了他们认为合适的空间（例如iPhone的模式 select ，当打开时，看起来完全不同于传统的弹出菜单）。

HTML is very limited in what it specifies for form controls. That leaves room for operating system and browser makers to do what they think is appropriate (like the iPhone’s modal select which, when open, looks totally different from the traditional pop-up menu).

看起来大多数操作系统都关闭了所选的选项，没有elipsis。如果你能够改变文本的截断方式，它会显得很奇怪，因为这不是选择框如何在其余的操作系统中工作。

It looks like most operating systems cut the selected option off without an elipsis. If you were able to change how the text gets cut off, it would look strange since that’s not how select boxes work in the rest of the operating system.

如果错误您可以使用可自定义的替换项，例如选择，它与原生选择。

If it bugs you, you can use a customizable replacement, like Chosen, which looks distinct from the native select.

或者，针对主要操作系统或浏览器提交错误。对于我们所知道的，在 select 中截断文本的方式可能是由于每个人复制的岁月监督的结果，它可能是改变的时候了。

Or, file a bug against a major operating system or browser. For all we know, the way text is cut off in selects might be the result of a years-old oversight that everyone copied, and it might be time for a change.

这篇关于在下拉框中显示溢出文本的省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！