Webサイトを制作する際、困った状況に陥ることがある、連続した半角英数文字の扱い。
通常、何も指定を加えなければWebブラウザは半角英数文字の連続は改行を判断しないので
表示エリアを無視して突き出た状態になってしまい、レイアウトをとんでもなく崩してくれることに。。。
IEではCSSの独自プロパティ「word-break」の指定があり、
改行の制御をすることが可能だったりするのですが、
他のモダンブラウザにはこの指定は効果を成さず、
代わりに「word-break.js」などのJavaScriptを使うことがほとんど。
【以前の記事】
≫連続半角英数の改行
そんな半角英数文字の連続をCSSのみで制御出来る方法があったようです。
≫Wrapping Long URLs and Text Content with CSS・Perishable Press
＜pre＞タグを使ってCSSで「white-space」を使用するというもの。
IEだけでなく他のモダンブラウザでもCSSのみの指定で、
半角英数文字の連続を表示エリア幅で改行できるようになるそうです。
そんなに複雑に入り組んだ指定ではない上に、
CSS3ではなくCSS2レベルでの指定なので驚き。
まだ試していないので、実際あらゆる状況で対応できるかは定かではないですが
これが使えるようになるとかなりコーディングも助かることになるはず。
ご参考までに。。。