動的に切り捨てる<option>テキストを合わせる<select>リスト

Question

デフォルトでは、<select></select>要素のセレクタリストは、それに含まれる最大の​​3210子要素と同じ幅になります。 CSSで選択タグの幅をハードコーディングして幅を狭くすると、最も広いオプションが表示で切り捨てられます。

_...（省略記号）を付けると、オプションが選択されたときに切り捨てられて表示されますが、ドロップダウンを展開すると、末尾に省略記号を付けずにドロップダウンを全幅にする。

どうすれば達成できますか？

Answer 1

：

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; 
} 

:)

希望すると便利です。 cssとjQueryを使用して

Answer 3

私はここにクロームのための解決策を見つけた：

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

この方法を使用すると、選択タグのキャレットアイコンが消えるため、背景画像を使用することができます。