最近やたらとURLなどの文字列が折り返されない現象で頭を悩まされます。IEとSafari3以降はCSSでword-break:break-allを指定すれば折り返してくれます。Firefox3はハイフン(-)やスラッシュ(/）があればそこで折り返すのですが、半角英数のみだと折り返してくれません。word-break:break-allと少し挙動が違うようです。Firefox2はハイフン等の記号があっても折り返さず、突き抜けてしまします。

to-RさんがFirefoxとOperaでword-break:break-allを実現する「wordBreak.js」を公開していますが、tableだけにしか適用されずFirefox2をサポートしていないので、自分で書いてみました。（追記：ソースをgistにあげました）

wordbreak.js for jQuery — Gist

IEとFirefox2以外はゼロ幅スペースを各文字の間に入れ込むことで半角英数のみでも改行されます。IEはそれで動かなかったのでword-break:break-allをCSSで指定しました。Firefox2はゼロ幅スペースで調子が悪かったので仕方なく<wbr />を埋め込んでます。

対応ブラウザ

動作確認したブラウザは以下になります。

Windows

• IE6
• IE7
• Firefox2
• Firefox3
• Opera9.5
• Safari3.1
• Google Chrome

Mac

• Firefox3
• Firefox2
• Opera9.5
• Safari3.1

使い方とか注意点とか

$targetElementにはCSS形式で指定できるので「div.example li.url」とか自由に指定できます。あと、当然ですけどjQuery読まないと使えません。

注意点としては指定したDOM要素の子要素にHTMLのタグがあったとき、IE以外ではそのタグが消えてしまいます。具体的にどういうことかというと

<p class="wordBreak">test<em>emtext</em>test</p>

としたときに、emタグが消えてしまいます（em内の「emtext」というテキストノードは残るためここではあえて「要素」でなく「タグ」と表現しています）。再帰的にテキストノードだけ取得して処理すれば解消されるんだろうけど、とりあえず自分で使う分には今のところ問題ないので、必要になったらそのとき考えます。

word-breakの今後

word-breakはCSS3以降では正式に採用が検討されているようなので、将来的にはCSSだけで制御できるようになると思います。しかしIEの独自拡張もたまにはいいのがあるなーと思った今日この頃です。