Q&A
WinChromeやWinFireFoxではなりませんね。
リセットCSS当ててみてはどうでしょう。
そもそも「そんな長い値が現実的か」という疑問点はあります。
前提・実現したいこと
HTMLのFORMのSELECT要素に長い名前のOPTION要素があると文字が途中で切れてしまい、要素を識別出来ない状況が生まれてしまっていて困っています。
プルダウンの中で折り返し表示、先頭省略、プルダウン幅や位置の調整などを、cssだけでできるものでしょうか？
発生している問題・エラーメッセージ
スクリーンショットはmac/Chromeのものです。
該当のソースコード
HTML
1<html lang="ja"><head> 2 <meta charset="utf-8"> 3 <title>selectテスト</title> 4 </head> 5 <body> 6 <form> 7 <select> 8 <option value="1">じゅげむじゅげむごこうのすりきれかいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつくうねるところにすむところやぶらこうじのぶらこうじぱいぽぱいぽぱいぽのしゅーりんがんしゅーりんがんのぐーりんだいぐーりんだいのぽんぽこぴーのぽんぽこなーのちょうきゅうめいのちょうすけ１</option> 9 <option value="2">じゅげむじゅげむごこうのすりきれかいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつくうねるところにすむところやぶらこうじのぶらこうじぱいぽぱいぽぱいぽのしゅーりんがんしゅーりんがんのぐーりんだいぐーりんだいのぽんぽこぴーのぽんぽこなーのちょうきゅうめいのちょうすけ２</option> 10 <option value="3">じゅげむじゅげむごこうのすりきれかいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつくうねるところにすむところやぶらこうじのぶらこうじぱいぽぱいぽぱいぽのしゅーりんがんしゅーりんがんのぐーりんだいぐーりんだいのぽんぽこぴーのぽんぽこなーのちょうきゅうめいのちょうすけ３</option> 11 </select> 12 </form> 13 14</body></html>
どういう目的でそんな長い文字列をプルダウンに入れたいのでしょうか？
選択項目はユーザーが自由記入したもので、255文字まで入力できるものです。
〜ほげほげ1
〜ほげほげ2
という項目を作られて後ろが切れてしまうとユーザーが選択できなくなってしまうのが悩みです。
回答1件
0
iOS / macOS / Android 上の Safari と Chrome では <select> メニューの見た目は一切変更できません(2021年4月現在)。長い項目が切られても対処方法はありません。
投稿2021/04/01 15:06
総合スコア20995
あなたの回答
tips
プレビュー
