A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
> widthを設定してしまうと折り返しはできないのでしょうか?
> 折り返すことは可能でしょうか?
ANo.1で「これは仕様ですので、「折り返し」という状態にはなりません。」と書いたのは、selectに幅を指定する/しないに関わらず、という事です。
つまり、まとめると:
・selectに幅を指定しなければ、selectの幅は子要素のoptionの一番長い文字列の幅まで成り行きで伸びるので、optionのテキストは最後まで表示される。
・selectに幅を指定すると、optionに表示されるテキストのボリュームが相対的にその幅より大きい場合、幅に収まりきらないテキスト部分は隠れてしまい表示されない。
という事であり、いずれの場合もoption内のテキストは折り返しという表示にはなりません。
ただし、「折り返さない」というのは共通なのですが、後者の場合の見え方は実はブラウザ依存で多少異なります。
IE6の場合、はみ出した分は上記の様に表示されないのですが、他の主要モダン・ブラウザであるFirefox、Safari等では初期表示部分についてははみ出す分はIE6同様に表示されていないのですが、実際にプルダウンさせてみると、プルダウン部分だけは親要素selectの幅を超えてテキストの最後まで表示してくれます。
なので、実質操作上はIE以外では特に問題は発生しないのですが。IEでの見え方に拘るなら、selectに指定する幅に余裕を持たせておく・フォントサイズをかなり小さめにしておく、などの対処ぐらいしかないと思います(まあクライアント側で文字表示サイズを大きくされてしまったらそこまでですが)。
>abrilさん
ご丁寧なご回答ありがとうございます。納得しました。できるかできないかがはっきりしただけで、前向きに次の対処法をみる心構えができました。なんとなくできそうな気はしていたのですが、不可能な事もたくさんあるんですね。。
これを機にまた勉強させていただきます。
ありがとうございました(~O~)
No.1
- 回答日時:
> オプションメニューの中の文字を折り返したい
ここで仰っている「オプションメニュー」というのは、具体的にはどういうマークアップをされているものでしょう?
<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.練習HPB.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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) [貼り付けオプション]とは? 3 2022/04/17 08:15
- gooブログ ブログの記事を書きだしのみに表示したい 1 2022/06/25 19:11
- Excel(エクセル) [クイックアクセスツールバー]の設定ファイルの格納場所について、 5 2023/04/21 14:43
- Outlook(アウトルック) Outlook トップ画 イニシャル変えたい Outlookについてわかる方教えてください。 左のメ 1 2022/11/06 23:58
- Visual Basic(VBA) 【ExcelVBA】動的にボタン、ボタン名を生成できますか? 7 2022/04/08 12:54
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- Word(ワード) ワードでメニュー表を作っています。 1番上の「メニュー」の文字を枠で囲っているのですが、この枠をもう 3 2023/01/23 14:55
- その他(IT・Webサービス) Yahooの地図の文字サイズ、googleの地図の画面分割 1 2022/05/21 12:31
- Excel(エクセル) [条件付き書式]の設定順の変更は可能か? 4 2022/12/07 10:37
- HTML・CSS CSSでの文字位置の上下センタリング 3 2023/03/08 18:42
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教えるわが家の防犯対策術!
ホームセキュリティのプロが、家庭の防犯対策を真剣に考える 2組のご夫婦へ実際の防犯対策術をご紹介!どうすれば家と家族を守れるのかを教えます!
-
<SELECT>タグの折り返し
HTML・CSS
-
セレクトボックスの幅を指定した状態で、選択肢の文字列を全て表示する方法
HTML・CSS
-
Selectボックスの幅を自動で広げたい
AJAX
-
-
4
SELECTのプルダウンの長さの調整
HTML・CSS
-
5
value内に変数を入れたい
JavaScript
-
6
HTMLフォームのSELECTの幅を一定にするためには?
HTML・CSS
-
7
【jQuery】input nameの文字列を変数を使い動的にする方法
JavaScript
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
オプションメニューの中の文字...
-
ユーザーフォーム スクロール...
-
マイクロソフトのワードの文章...
-
SELECTのプルダウンの長さの調整
-
B4サイズを実寸大で表示できる...
-
フォルダ内の写真を画面幅にあ...
-
証明写真の一般的な顔の大きさ...
-
photoshop elementsで画面表示...
-
縦長のホームページを作りたい...
-
premiere elements8 でのプリセ...
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
-
入力規則のリストの文字の大き...
-
EXCEL VBA 印刷プレビューダイ...
-
テーブル内の文字サイズを変更...
-
16x16のスプライトフォント
-
特定の文字のみcssを適用するに...
-
alertで表示させる文字サイズは...
-
cssファイルの名称付け
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Illustratorで作成、pngで保存...
-
ユーザーフォーム スクロール...
-
SELECTのプルダウンの長さの調整
-
マイクロソフトのワードの文章...
-
プルダウンメニュー表示時の高...
-
オプションメニューの中の文字...
-
PDFファイルを横につなぐ事は可...
-
フォルダ内の写真を画面幅にあ...
-
アップしたホームページがスマ...
-
photo shopでA4サイズは何セン...
-
Word Webレイアウト表示に関して
-
秀丸エディターの「表示」の「...
-
ホームページビルダー10【ス...
-
今現在の標準の解像度は?
-
中心に表示する方法
-
Rainlendarの設定について
-
縦長のホームページを作りたい...
-
paraflaで結婚式のプロフィール...
-
ipad mini メモ帳の見切れ
-
PowerPointでホームページ
おすすめ情報