CONFIDELIC

Firefox15でword-breakが実装されたので全半角英数記号が連続入力される場所や禁則処理についてのあれこれ

連続する全半角英数記号が入力された場合の改行処理に対応するため、
今まで以下のような対応を行ってきました。

※方針としては、希望としては禁則処理を正しく処理したいが、
テキストが領域（幅300pxとする）をはみ出してしまうことでのレイアウト崩れは起こさないこと。
見えるべき情報が見えなくなるのは避けたいが、レイアウト崩れ防止を優先とする。
対応ブラウザは、IE6以上、safari最新版、Chrome最新版、Firefox最新版とする。

→結果、禁則処理よりレイアウトの維持が優先されるスタイル設定となった。

■第一世代（～2010年頃まで）
width:300px;
word-break:break-all;
overflow:hidden;

IE/safari/chromeにはword-breakで強制的に単語の途中改行。
Firefoxにはword-breakが効かず、overflowで領域からはみ出たテキストを消す。

■第二世代（いまここ）
width:300px;
word-break:break-all;
word-wrap:break-word;

IE/safari/chromeにはword-breakで強制的に単語の途中改行。
Firefox3でword-wrapが実装されたためoverflowでの処理からword-wrapに変更し強制改行。

■第三世代（今日から）
width:300px;
word-wrap:break-word;

Firefox15.0（2012/08/28 リリース）からword-breakプロパティが実装された。
これに伴い、上記設定に変更する。
IE/webkit/Firefoxすべてに適用。

※今頃気づいたこと…
第一世代の対応は今考えてみると間違いだったんじゃないか。word-wrapとoverflowにすべきだったか。
第二世代の時にはもうword-break:break-all;はいらなかったんじゃないかということ。
だってIEってword-wrapをかなり前から先行実装してたから。