7

ページにドロップダウンリストを配置したいのですが、1つのオプションが長すぎるため、選択メニューをクリックすると、ページの他の部分が展開されて表示されます。

<select id="selectlist" name="SelectProgram">

    <option value="LIR" >LIR</option>
        <option value="How to word wrap text in HTML?">How to word wrap text in HTML? CSS / HTML text wrap for webkit</option>

2番目のオプションは長すぎるため、拡張されます。このような長いテキストを2行に折り返す方法はありますか？ありがとうございました！

4

3 に答える 3

6

Selectの値とテキストは、大きく異なる場合があります。選択したテキストの文字列がXより長い場合は、それを切り捨てると思います。

jqueryの例

$('#myselect option').each(function()
{
    var myStr = $(this).text();
    if(myStr.length > 15){$(this).text(myStr.substring(15));}
});

それをドキュメントに準備しておくと、テキストがより適切なサイズにトリミングされ、オーバーフローを非表示にするdivで要素をラップすると、後で混乱が生じます。ここに戻って、小さい文字列の場合と同様の問題が発生します。

于 2012-08-06T19:12:01.997 に答える
5

div固定幅の設定は、使用するだけで折り返しなしで行えます

<select id="selectlist" name="SelectProgram" style="width: 500px">
   <option value="LIR" >LIR</option>
   <option value="How to word wrap text in HTML?">How to word wrap text in HTML? CSS / HTML text wrap for webkit</option>
</select>

width: 500px実際には、CSSファイルに一致するルールを入れる必要があります。

于 2012-08-06T19:10:56.733 に答える
0

その入力をdivでラップし、divに幅を設定して、行がdivの外側に出ないようにします。以下のようになります。

<div id="something" style="width:500px">
  <select id="selectlist" name="SelectProgram">
     <option value="LIR" >LIR</option>
     <option value="How to word wrap text in HTML?">How to word wrap text in HTML? CSS / HTML text wrap for webkit</option>
  </select>
</div>
于 2012-08-06T19:05:17.593 に答える