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

问题描述

我正在修改我的一个下拉框的宽度 (是的，我知道有这样做的 cross-browser 问题) 。

是否有一种 non-js 方式来切断溢出的文本并附加省略号？ text-overflow：省略号不适用于<select> 元素 (至少在 Chrome 中) 。

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

最佳解决办法

HTML 在表单控件中指定的内容非常有限。这为操作系统和浏览器制造商提供了他们认为合适的空间 (如 iPhone 的模态 select，在打开时，与传统的 pop-up 菜单完全不同) 。

看起来大多数操作系统都切断了所选择的选项，而无需省略。如果您能够更改文本的截断方式，则看起来很奇怪，因为这不是选择框在其余操作系统中的工作原理。

如果它有错误，可以使用可自定义的替换，如 Chosen，它看起来与本机 select 不同。

或者，针对主要操作系统或浏览器提出错误。对于我们所知道的，文本在 select 中被切断的方式可能是每个人复制的 years-old 监督的结果，可能是更改的时间。

次佳解决办法

如果您发现这个问题，因为您的选择框上有一个自定义箭头，文本正在翻过箭头，我发现一些解决方案适用于某些浏览器。只需在 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/

第三种解决办法

最简单的解决方案可能是限制 HTML 本身的字符数。 Rails 有一个 truncate(string, length)帮手，我确定你使用的任何一个后端都提供了类似的东西。

由于 cross-browser 问题，您已经熟悉了选择框的宽度，这似乎是我最直接和最少的 error-prone 选项。

<select>
  <option value="1">One</option>
  <option value="100">One hund...</option>
<select>

第四种办法

你可以使用这个：

select {
    width:100px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
select option {
    width:100px;
    text-overflow:ellipsis;
    overflow:hidden;
}
div {
    border-style:solid;
    width:100px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

第五种办法

quirksmode 对’text-overflow’ 属性有很好的描述，但您可能需要应用一些其他属性，如’white-space: nowrap’

虽然我不是 100％如何在一个选择对象中表现，但值得先尝试一下：

http://www.quirksmode.org/css/textoverflow.html

参考文献

Ellipsis for overflow text in dropdown boxes

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

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