HTMLドロップダウンオプションのドロップダウン要素の幅を設定する

Question

私は、PHPスクリプトを使用して選択ボックスに自動的に入力するWebサイトで作業しています。問題を除いて、これはすべてうまくいきます。私がテキストボックスを埋めるために使っているのは非常に長いタイトルです（ジャーナル記事とプレゼンテーションタイトルです）。ドロップダウンボックスは、画面の端から伸びる最も長い要素の幅まで広がっているため、スクロールバーに到達できません。私は手動でドロップダウンボックスをCSSを使って特定の幅に設定しようとするさまざまな方法を試みましたが、これまでのところ役に立たなかったのです。選択ボックスを特定の幅に設定するのに最適なのですが、ドロップダウンメニュー自体ははるかに広いです。

これについてのヒントは非常に高く評価されます。

EDIT：

これは、次のCSSラインは（私はページをテストしていたものです）Google Chromeのを除き、主要なブラウザのすべてで動作していることが判明しました。 Chrome用のソリューションがわかっている場合は、そのことを知っておくとよいでしょう。 （いくつかの制約があるが）あなたはスタイルができ

select, option { width: __; } 

Answer 1

実際optionセレクタを持つアイテムに自分自身を：

select, option { width: __; } 

あなただけのドロップダウンを制約されていないこの方法ではなく、そのすべての要素。サーバー側で

Answer 2

：select要素：

1. は、文字列の最大長
2. Clipストリング
3. （オプション）

水平省略記号を追加する別の解決策を定義あなたの場合（単なる推測の）単一選択フォームコントロールであり、代わりにラジオボタンのグループを使用することができます。これらは、より良い制御でスタイルを設定できます。 select [@multiple]がある場合は、チェックボックスのグループを複数選択することができます。

Answer 3

長いドロップダウンボックスを処理する最も良い方法は、固定幅のdivコンテナの内側に配置し、selectタグのwidth：autoを使うことです。ほとんどのブラウザにはdiv内のドロップダウンが含まれますが、クリックすると展開されて完全なオプション値が表示されます。 IEエクスプローラでは機能しませんが、修正プログラムがあります（IEには常に必要です）。あなたのコードは次のようになります。

HTML

<div class="dropdown_container"> 
    <select class="my_dropdown" id="my_dropdown"> 
    <option value="1">LONG OPTION</option> 
    <option value="2">short</option> 
    </select> 
</div> 

CSS

div.dropdown_container { 
    width:10px; 
} 

select.my_dropdown { 
    width:auto; 
} 

/*IE FIX */ 
select#my_dropdown { 
    width:100%; 
} 

select:focus#my_dropdown { 
    width:auto\9; 
} 

Answer 4

小さく、より良い一つ

var i = 0; 
$("#container > option").each(function(){ 
    if($(this).val().length > i) { 
     i = $(this).val().length; 

     console.log(i); 
     console.log($(this).val()); 
    } 
}); 

Answer 5

小さく、ベストワン

#test{ 
width: 202px; 
} 
<select id="test" size="1" name="mrraja"> 

Answer 6

uは、単にドロップダウンボックス

<select class="my_dropdown" id="my_dropdown" style="width:APPROPRIATE WIDTH IN PIXLES"> 
<option value="1">LONG OPTION</option> 
<option value="2">short</option> 
</select> 

例えばの長さを変更するには、「スタイル」の「幅」属性を使用することができます

style="width:200px" 

Answer 7

HTML：

<select class="shortenedSelect"> 
    <option value="0" disabled>Please select an item</option> 
    <option value="1">Item text goes in here but it is way too long to fit inside a select option that has a fixed width adding more</option> 
</select> 

CSS：

.shortenedSelect { 
    max-width: 350px; 
} 

Javascriptを：

// Shorten select option text if it stretches beyond max-width of select element 
$.each($('.shortenedSelect option'), function(key, optionElement) { 
    var curText = $(optionElement).text(); 
    $(this).attr('title', curText); 

    // Tip: parseInt('350px', 10) removes the 'px' by forcing parseInt to use a base ten numbering system. 
    var lengthToShortenTo = Math.round(parseInt($(this).parent('select').css('max-width'), 10)/7.3); 

    if (curText.length > lengthToShortenTo) { 
     $(this).text('... ' + curText.substring((curText.length - lengthToShortenTo), curText.length)); 
    } 
}); 

// Show full name in tooltip after choosing an option 
$('.shortenedSelect').change(function() { 
    $(this).attr('title', ($(this).find('option:eq('+$(this).get(0).selectedIndex +')').attr('title'))); 
}); 

作品完璧。私も同じ問題がありました。このJSFiddleを確認してくださいhttp://jsfiddle.net/jNWS6/426/