动态截断 <option> 文本以适合 <select> 列表

Question

默认情况下，元素显示的选择器列表将与其包含的<select></select>最宽子元素一样宽。<option></option>如果我使用 CSS 对 select 标签的宽度进行硬编码以使其更窄，则最宽的选项会在显示中被截断。

我想修剪选项文本以适合选择列表，附加_...（省略号）以显示选择选项时它被截断，但是，当我展开下拉列表时，我希望下拉列表中的文本为全宽，没有尾随省略号。

我将如何实现这一目标？

Answer 1

使用css和jQuery：

$('select').on('change', function() {
  $(this).find('option').removeClass('selected');
  $(this).find('option:selected').addClass('selected');
});

select,
option.selected {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
  <option>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
</select>

演示