动态截断< option>文字以符合< select>名单 [英] Dynamically truncate <option> text to fit <select> list

问题描述

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

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

我将如何实现这一目标？

解决方案

使用 css 和 jQuery ：

  select，option.selected {
 width：100px; 
 overflow：hidden; 
 white-space：nowrap; 
文本溢出：省略号; 
} 
  

jQuery
<$ p $（'select'）。$（'select'）。$（$'$'）。（''''）。 b $ b $（this）.find（'option：selected'）。addClass（'selected'）;
}）;

演示

By default, the selector list shown for a <select></select> element will be as wide as the widest <option></option> child it contains. If I hardcode the width of the select tag with CSS to make it more narrow, the widest option is truncated in the display.

I want to trim down the option text to fit the selection list, appending _... (ellipsis) to show that it's truncated when the option is selected, however, when I expand the dropdown I want the text in the dropdown to be full width, without trailing ellipsis.

How would I accomplish that?

解决方案

Using css and 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

这篇关于动态截断&lt; option&gt;文字以符合&lt; select&gt;名单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！