省略号用于在下拉框中溢出文本
我正在修复我的一个下拉框的宽度（是的，我知道这样做有跨浏览器的问题）。
有没有一个非JS的方法来中断溢出的文本和附加椭圆？ 文本溢出：省略号对<select>元素不起作用（至less在Chrome中）。
示例： http : //jsfiddle.net/t5eUe/
HTML在表单控件中指定的内容非常有限。 这给操作系统和浏览器制造商留下了一些他们认为合适的空间（例如iPhone的模式select ，当它打开时，与传统的popup式菜单完全不同）。
它看起来像大多数操作系统没有elipsisclosures选定的选项。 如果你能够改变文本被切断的方式，那看起来很奇怪，因为这不是select框在其他操作系统中的工作方式。
如果错误的话，你可以使用一个可定制的replace，比如Chosen ，和本地select 。
或者，针对主要操作系统或浏览器提出错误。 就我们所知，文本在select被切断的方式可能是每个人都复制了几年的监督的结果，也许是时候改变了。
如果您发现这个问题是因为您的select框上有一个自定义箭头，并且文本正在经过您的箭头，我发现了一个适用于某些浏览器的解决scheme。 只需在右侧添加一些填充，即可。
之前：
后：
CSS：
select { padding:0 30px 0 10px !important; -webkit-padding-end: 30px !important; -webkit-padding-start: 10px !important; }
iOS会忽略padding属性，而是使用-webkit-属性。
最简单的解决scheme可能是限制HTML本身的字符数。 Rails有一个截断（string，长度）助手，我敢肯定，无论你使用的后端提供了类似的东西。
由于您对于select框的宽度已经很熟悉的跨浏览器问题，在我看来，这似乎是最直接，最不容易出错的选项。
<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对“文本溢出”属性有很好的描述，但是你可能需要应用一些额外的属性，比如“white-space：nowrap”
虽然我不是100％如何在一个select的对象中performance，但可能值得首先尝试：
你可以使用这个jQuery函数，而不是加Bootstrap工具提示
function DDLSToolTipping(ddlsArray) { $(ddlsArray).each(function (index, ddl) { DDLToolTipping(ddl) }); } function DDLToolTipping(ddlID, maxLength, allowDots) { if (maxLength == null) { maxLength = 12 } if (allowDots == null) { allowDots = true } var selectedOption = $(ddlID).find('option:selected').text(); if (selectedOption.length > maxLength) { $(ddlID).attr('data-toggle', "tooltip") .attr('title', selectedOption); if (allowDots) { $(ddlID).prev('sup').remove(); $(ddlID).before( "<sup style='font-size: 9.5pt;position: relative;top: -1px;left: -17px;z-index: 1000;background-color: #f7f7f7;border-radius: 229px;font-weight: bold;color: #666;'>...</sup>" ) } } else if ($(ddlID).attr('title') != null) { $(ddlID).removeAttr('data-toggle') .removeAttr('title'); } }
有点简单，但在所有浏览器中为我工作：
select { font-size: 0.9rem }
