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

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

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

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).

有没有一种非js的方法可以删除溢出的文本和附加的省略号?文本溢出:省略不适用于 <选择> 元素(至少在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>

Example here: http://jsfiddle.net/t5eUe/

例子:http://jsfiddle.net/t5eUe/

8 个解决方案

#1

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).

HTML在为表单控件指定的内容方面非常有限。这给操作系统和浏览器制造商留下了空间，让他们去做他们认为合适的事情(比如iPhone的modal select，打开后看起来与传统的弹出菜单完全不同)。

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.

看起来大多数操作系统都在没有elipsis的情况下删除了所选的选项。如果您能够更改文本的截断方式，那么看起来会很奇怪，因为在操作系统的其他部分，选择框并不是这样工作的。

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

如果它使您不满意，您可以使用一个可定制的替换，如selected，它看起来与本机选择不同。

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.

或者，针对主要的操作系统或浏览器提交一个bug。据我们所知，在select语句中截断文本的方式可能是多年来每个人都进行了复制的疏忽的结果，现在可能是进行更改的时候了。

#2

If you are finding this question because you have a custom arrow on your select box and the text is going over your arrow, I found a solution that works in some browsers. Just add some padding, to the select, on the right side.

如果你找到了这个问题，因为你的选择框上有一个自定义箭头，而文本正在越过你的箭头，我找到了一个在一些浏览器中工作的解决方案。在右边的select中添加一些填充。

Before:

之前:

After:

后:

CSS:

CSS:

select {
    padding:0 30px 0 10px !important;
    -webkit-padding-end: 30px !important;
    -webkit-padding-start: 10px !important;
}

iOS ignores the padding properties but uses the -webkit- properties instead.

iOS忽略了填充属性，而是使用-webkit-属性。

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

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

#3

The simplest solution might be to limit the number of characters in the HTML itself. Rails has a truncate(string, length) helper, and I'm certain that whichever backend you're using provides something similar.

最简单的解决方案可能是限制HTML本身的字符数。Rails有一个截尾助手(字符串、长度)，我确信无论使用哪个后端，都提供了类似的功能。

Due to the cross-browser issues you're already familiar with regarding the width of select boxes, this seems to me to be the most straightforward and least error-prone option.

由于跨浏览器的问题，您已经熟悉了选择框的宽度，在我看来，这是最直接、最容易出错的选项。

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

#4

You can use this:

您可以使用:

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;
}

#5

quirksmode has a good description of the 'text-overflow' property, but you may need to apply some additional properties like 'white-space: nowrap'

quirksmode对“text-overflow”属性有很好的描述，但是您可能需要应用一些额外的属性，比如“white-space: nowrap”

Whilst I'm not 100% how this will behave in a select object, it could be worth trying this first:

虽然我并不是100%的选择对象，但是首先尝试一下是值得的:

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

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

#6

You can use this jQuery function instead of plus Bootstrap tooltip

您可以使用这个jQuery函数，而不是自引导工具提示

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');
    }
}

#7

CSS file

CSS文件

.selectDD {
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;     
}

JS file

JS文件

$(document).ready(function () {
    $("#selectDropdownID").next().children().eq(0).addClass("selectDD");
});

#8

Bit simplistic, but worked for me in all browsers:

有点简单，但对我在所有浏览器:

select { font-size: 0.9rem }