オプションメニューの中の文字を折り返したい

質問

ビルダー１２を使用しています。
オプションメニューを作成して、その幅を設定したらメニュー名が長いものは途中で切れて表示されています。
オプションメニューの幅を変えずにメニューの文字をすべて表示するにはどうしたらいいのでしょうか？

ご教示いただけると大変助かります☆(>_<)

回答No.2

abril

> widthを設定してしまうと折り返しはできないのでしょうか？
> 折り返すことは可能でしょうか？

ANo.1で「これは仕様ですので、「折り返し」という状態にはなりません。」と書いたのは、selectに幅を指定する／しないに関わらず、という事です。
つまり、まとめると：

・selectに幅を指定しなければ、selectの幅は子要素のoptionの一番長い文字列の幅まで成り行きで伸びるので、optionのテキストは最後まで表示される。
・selectに幅を指定すると、optionに表示されるテキストのボリュームが相対的にその幅より大きい場合、幅に収まりきらないテキスト部分は隠れてしまい表示されない。

という事であり、いずれの場合もoption内のテキストは折り返しという表示にはなりません。
ただし、「折り返さない」というのは共通なのですが、後者の場合の見え方は実はブラウザ依存で多少異なります。
IE6の場合、はみ出した分は上記の様に表示されないのですが、他の主要モダン・ブラウザであるFirefox、Safari等では初期表示部分についてははみ出す分はIE6同様に表示されていないのですが、実際にプルダウンさせてみると、プルダウン部分だけは親要素selectの幅を超えてテキストの最後まで表示してくれます。

なので、実質操作上はIE以外では特に問題は発生しないのですが。IEでの見え方に拘るなら、selectに指定する幅に余裕を持たせておく・フォントサイズをかなり小さめにしておく、などの対処ぐらいしかないと思います（まあクライアント側で文字表示サイズを大きくされてしまったらそこまでですが）。

お礼

>abrilさん
ご丁寧なご回答ありがとうございます。納得しました。できるかできないかがはっきりしただけで、前向きに次の対処法をみる心構えができました。なんとなくできそうな気はしていたのですが、不可能な事もたくさんあるんですね。。

これを機にまた勉強させていただきます。
ありがとうございました(~O~)

回答No.1

abril

> オプションメニューの中の文字を折り返したい

ここで仰っている「オプションメニュー」というのは、具体的にはどういうマークアップをされているものでしょう？
<select>
<option value="hoge1">hoge1</option>
<option value="hoge2">hoge2</option>
</select>
の、<option>～</option>の事を仰っているのでしょうか？

もしそうであるなら、selectの幅は子要素のoptionの一番長い文字列の幅まで成り行きで伸びます。
ただし、質問者様が「その幅を設定したら」と仰っているのがselectの幅をwidthプロパティで固定（例えば、width: 100px;　等）したという事であれば、optionに表示する文字列のボリュームがその幅より相対的に大きくなってしまった場合は溢れた分は隠れてしまい、「メニュー名が長いものは途中で切れて表示」となるわけです。これは仕様ですので、「折り返し」という状態にはなりません。

全く違う事を仰っているのであれば、具体的にソースを提示して下さい。

補足

説明が不足していてすみません（>_<）
abrilさんがおっしゃった解釈で当たっていると思います。
widthを設定してしまうと折り返しはできないのでしょうか？
その辺の仕組みがいまいちわからないのですが。。
折り返すことは可能でしょうか？
ご回答いただけたら幸いです♪

<FORM><SELECT name="menu" onchange="parent.練習ＨＰＢ.location.href=this[this.selectedIndex].value" style="color : #009999;width : 175px;">
<OPTION value="test.html"selected>creating_homepage</OPTION>
<OPTION value="test1.html#cat">homepage*homepage*homepage*homepage</OPTION>
<OPTION value="test2.html#dog">builder*builder*builder*builder</OPTION>
<OPTION value="test3.html#pig">optionmenu*optionmenu*optionmenu</OPTION>
</SELECT>
</FORM>