CSS / 半角英数字の自動改行を行う（IE限定）:WEB life

CSS / 半角英数字の自動改行を行う（IE限定）

2008/07/12(土)

あまり無いのですが、掲示板などで半角英数字を書き込みなんぞされると
レイアウトが崩れてしますことがあるのですが、これは単語が途中で改行されると見づらくなるため
ブラウザが勝手にやっている事あのですが、結構厄介ですよね。

そこでIE限定ですが横幅にあわせて改行させる方法を紹介します。

それにはword-breakを使います。
構文

#kaigyou{
   word-break:normal;
   word-break:break-all;
   word-break:keep-all;
}

それぞれの意味は下記の通りです。
normal:半角英数字のみ単語の切れ目で改行する
break-all:半角英数字、日本語共に単語の途中でも改行する
keep-all:半角英数字、日本語共に単語の切れ目で改行する

あくまで、IE限定なので気をつけて下さい。
firfox、safari、operaなどでは横幅を固定にすることで、レイアウトkずれは防げます。