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循环实现了目标：

$('#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) + "...");
        }
    });

Answer 2

将white-space: nowrap向上移动到选择本身，而不仅仅是选项。

为我工作！

Answer 3

这种造型适用于SCSS：

select {
  width: 100%;
  option {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

选择多个文本溢出？

3 个答案: