[css]フォームの項目の折り返し

　こういう、たくさん項目があって必要なものにチェックを入れてください、というフォームを作ることがあって。

山手線 京浜東北・根岸線 中央線 常磐線 東海道本線 総武線

このとき、何も指定していないと、ブラウザはこんなふうに、チェックボックスの後ろで改行されてしまうことがある。

山手線 京浜東北・根岸線 中央線 常磐線 東海道本線 総武線

これを避けるために、強制的に改行を入れる人がいて。

<div style="border:1px solid black;width:200px;padding:10px;">
	<label><input type='checkbox' name='field[]' value='1' />山手線</label>
	<label><input type='checkbox' name='field[]' value='2' />京浜東北・根岸線</label><br/>
	<label><input type='checkbox' name='field[]' value='3' />中央線</label>
	<label><input type='checkbox' name='field[]' value='4' />常磐線</label><br/>
	<label><input type='checkbox' name='field[]' value='5' />東海道本線</label>
	<label><input type='checkbox' name='field[]' value='6' />総武線</label>
</div>

より力ずくの例としては、テーブルにして行を切ってしまうとか。
そういう方法でも一応問題は解決するんだけど、後日路線が増えたら関係ないところまで直さないといけないし、フォントサイズを変えている人がいたら意味不明なところで改行される恐れもあって、できればこういうことはしたくないものですよね。

で、スマートにやる方法。

<blockquote>
<div style="border:1px solid black;width:200px;padding:10px;">
	<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='1' />山手線</label>
	<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='2' />京浜東北・根岸線</label>
	<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='3' />中央線</label>
	<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='4' />常磐線</label>
	<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='5' />東海道本線</label>
	<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='6' />総武線</label>
</div>
</blockquote>

こういう風に、改行されたら困る単位で"white-space:nowrap;"を指定してあげれば、それ以外の位置を見つくろって改行してくれるので、内容が変わってもフォントサイズが変わっても大丈夫なコードになります。

＃ここでstyle=""を使っているのは、見やすさのためなので、本来はもちろんCSS上で適当なセレクタに"white-space:nowrap;"を指定しましょう。

当たり前の話なんだけど、なぜか強引に改行を挿入する人がいっぱいいるみたいなので書いてみた。