Home > WEBデザイン > セレクタの文字列が長すぎて表示しきれない場合の対処法

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


文字列が長すぎる場合のセレクタの表示

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

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

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

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

通常の各ブラウザ表示

Windows InternetExplorer7のセレクタ表示

Windows InternetExplorer7

Windows InternetExplorer6のセレクタ表示

Windows InternetExplorer6

Windows Firefox2のセレクタ表示

Windows Firefox2

Windows Opera9のセレクタ表示

Windows Opera9

MacintoshOSX Safari2のセレクタ表示

MacintoshOSX Safari2

MacintoshOSX Firefox1.5のセレクタ表示

MacintoshOSX Firefox1.5

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

CSSを使って、改行表示

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

Windows Firefox2のセレクタをCSSで改行表示

Windows Firefox2

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

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

Comments:0

Comment Form

Trackbacks:0

TrackBack URL for this entry
http://blog.tofu-kun.org/mt-tb.cgi/314
Listed below are links to weblogs that reference
セレクタの文字列が長すぎて表示しきれない場合の対処法 from Webプログラマー+WebデザイナーなZARU日記

Home > WEBデザイン > セレクタの文字列が長すぎて表示しきれない場合の対処法

Profile

zaru

Name : zaru

Webプログラマ+Webデザイナで、Webディレクタやってます。Twitterやっているので、ぜひフォローしてやってくださいませ。Twitter - zaru。また、そのほかのプロフィールについては、iddy - zaruを見てください。

Search
Feeds
Others

Return to page top