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

我正在修复我的一个下拉框的宽度(是的,我知道这样做有跨浏览器的问题)。

有没有一个非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-属性。

http://jsfiddle.net/T7ST2/4/

最简单的解决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,但可能值得首先尝试:

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

你可以使用这个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 }