html - 选择多个文本溢出？

Question

我正在尝试对具有多个选择的选项应用文本溢出。但是，我似乎无法触摸选项文本。

这是我的 HTML:

 <select id="multiselect" multiple="" size="6">

   <option value="123456780123456780123456780123456780123456780123456780" selected="selected">123456780123456780123456780123456780123456780123456780</option>
    <option value="other" selected="selected">other</option>
</select>

这是我的 CSS:

#multiselect {
width: 222px;
border-top: 2px solid #ccc;
float: none;
background: #fff;
outline: none;
margin-right: 0;
margin-left: 5px;
border-radius: 0;
margin-bottom: 11px;
overflow: hidden;
text-overflow: ellipsis;
}

#multiselect option {
  overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
 width:222px;
}

我知道文本溢出在它应该(我认为)只应用于选项时会重复，但我想证明它在任何一种解决方案中都不起作用。

有没有人有这方面的经验？

Answer 1

不幸的是，我找不到纯 CSS 的解决方案，所以我从 this post 中获得了一些灵感。 (不是选择的答案，而是另一个，它更准确并且处理非间隔答案)并提出这个 JS Loop 实现目标:

$('#multiselect option').each( function() {
        //Manually make the ellipsis, since CSS3 gets weird with select multiple.
        if (dictionary_length($(this).text()) > 30) {
            $(this).text($.trim($(this).text()).substring(0, 28).trim(this) + "...");
        }
    });