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

Question

默认情况下，为＆lt; select＆gt;＆lt; / select＆gt;显示的选择器列表element将与最宽的＆lt; option＆gt;＆lt; / option＆gt;一样宽它包含的孩子。如果我使用CSS对select标签的宽度进行硬编码以使其更窄，则最宽的选项会在显示中被截断。 我想减少选项文本以适应选择列表，附加...（省略号）以显示在选择选项时它被截断，但是，当我展开下拉列表时，我希望下拉列表中的文本为全宽，没有尾随省略号。 我怎么做到这一点？

Answer 1

使用css和jQuery：

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

jQuery

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

demo

Answer 2

我相信你所寻找的是：

option {
  width: 200px; // Adjustable
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这将自动强制选择选项为指定的宽度，并将任何“溢出”文本转换为保留在边界内的省略号：）

希望这有帮助！

Answer 3

我在这里找到了解决方案：

https://stackoverflow.com/a/26627224/4743939

使用此方法，select标签中的插入符号图标将消失，因此您可能需要使用背景图像。