セレクタの文字列が長すぎて表示しきれない場合の対処法

フォームのセレクタ <select></select> を使うとき、デザイン上、横幅を固定にしなくてはならず、その上、<option></option> の文字列が長すぎて固定の横幅に入りきらない場合の回避策。

は、結論から言えば見つからなかった。

とは言いつつも、Windows InternetExplorer以外であれば、選択して展開されるボックスが横に間延びして全てを表示してくれるので、ユーザビリティが損なわれているという1点に目をつぶれば問題はない。

それも嫌な場合は、FirefoxであればCSSで回避することもできる。

通常の各ブラウザ表示

InternetExplorer以外は選択したときに全文が表示されているのが分かる。このボックス自体も幅固定したい場合は、以下のようにCSSを指定してやると <option></option> 内で改行したように見せることができる。

CSSを使って、改行表示

select{
	height:1.3em;
	width:8em;
}
option{
	width:8em;
	white-space:normal;
}

Firefoxでしか効果がないのが難点。

このような事態にならないように、事前のサイト設計をきっちりしようと自戒の念をこめてエントリ化。たぶん、文字列自体を削るのが一番いいんだろうなぁ。誰かスマートな解決方法を知っていたらご教授くださいませ。