2

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

这是我的 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;
}

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

有人对这个有经验么？

4

3 回答 3

1

不幸的是，我找不到纯 CSS 的解决方案，所以我从这篇文章中获得了一些灵感（不是选择的答案，而是另一个更准确并处理非空格答案）并想出了这个 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) + "...");
        }
    });
于 2013-02-18T13:07:53.933 回答
1

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

为我工作！

于 2013-06-05T00:08:45.693 回答
1

这种样式对我来说适用于 SCSS：

select {
  width: 100%;
  option {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
于 2018-05-15T11:59:06.823 回答