半角英数字を改行する
2009年5月22日 16:02
URLやメールアドレスなどの半角英数字を羅列した際に、それを包括する要素を突き抜けてレイアウト崩れが発生することがあります。
これは、スペース等の区切りが登場するまで一つの単語として認識され、通常では改行されません。
これをJSで解決されてたブログを見つけたのでご紹介します。
CSSにて[word-break:break-all;]と指定すれば、半角英数字の文字列の途中であっても領域に合わせて改行することが可能です。
しかし、これはIEでしか対応しておらず、そのほかのブラウザでは対応していません。
「to-R」というブログで「wordBreak.js」というものが公開されており、IE以外のブラウザでも[word-break:break-all;]と同様の効果が得られるようです。
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」[to-R]
to-Rさんで公開されているJSではtable要素にしか対応していませんが、こちらにてそのほかの要素にも適応できる方法が紹介されています。
半角英数文字列の改行 : 消波ブログ（一級建築士受験録）
table要素以外にも適応できるようにカスタマイズした際に、インライン要素（span要素など）に適応させた場合、IE8ではうまく改行されない様です。
そのためCSSで次の様に指定すると、うまく改行されるようになります。
span.wordBreak{
display:inline-block;
}
