web-dev-qa-db-ja.com

選択リストのワードラップオプション

選択リスト内で長いオプションをラップすることは可能ですか？

私は動的選択リストを持っています、そしていくつかのオプションはかなり長いです。長すぎて次の行に折り返すことができないオプションが欲しいのですが。それを超えて、それらの行をインデントしたいと思います。

これが不可能な場合の私の解決策は、結果をn文字にトリミングすることです。

これが私が持っているものです：

I'm a short option
This is a really really really long option
This one isn't too bad
But whoa look how long I am! I go on forever!

そして、これが私が欲しいものです：

I'm a short option
This is a really really 
    really long option
This one isn't too bad
But whoa look how long 
    I am! I go on forever!
htmlcssdrop-down-menu
19
hookedonwinter

標準の<option>でこれを行うことはできません。自分でロールするか、 メニュープラグインを見つける

12
Scott Evernden

これは、いくつかの助けになるかもしれない迅速で純粋なjQueryソリューションです。独自のドロップダウンを作成し、Scott Everndenが述べたように、非表示の選択から値/テキストをプルする以外に。これはあなたに遊ぶためのいくらかの余地を与えるでしょう。 Wordの途中で途切れることはありませんが、同時にテキストを折り返すこともありません。全文がタイトルに含まれるため、ユーザーはロールオーバーして全文をWordでラップして表示できます。次に、maxChar設定を使用して特定の文字数に移動し、Wordが途切れないように、オンになっているWordの終わりを探します。オプションのmin-widthは、selectとインラインを維持する必要がありますが、先に進んでmaxChar変数を試して、範囲外にならないようにする必要があります。ほとんどの場合、カスタマイズされたソリューションを使用するので、これは短い回避策ですが、ユーザーが最初の1つまたは2つのWordで何を選択しているかを知ることができるクイックリストの場合、これはうまく機能します。これが誰かに役立つことを願っています：

var optionText, array = [], newString, maxChar = 40;
$('select').each(function(){
    $(this).find('option').each(function(i,e) {
        $(e).attr('title',$(e).text());
        optionText = $(e).text();
        newString = '';
        if (optionText.length > maxChar) {
            array = optionText.split(' ');
            $.each(array,function(ind,ele) { 
                newString += ele+' ';
                if (ind > 0 && newString.length > maxChar) {
                    $(e).text(newString);
                    return false;
                }
            });

        }
    });
});
2
Erik Grosskurth