Twitter / tacamy: { word-wrap: break-word; } ...

ということなのでJSを使わずにCSSだけでやれるみたいです。しかもこれだけ。

.word_wrap {
    word-wrap: break-word;
}

IE6、7、8、Firefox3.6、Safari4、Chrome、Opera10.52で確認しましたけどこれだけで全部いけます。ブラボー。

<div class="word_wrap">http://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%83%86%E3%82%A3</div>
<div class="word_wrap">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

meca.jsとかsisso.jsとか、その他のJSでword-breakしてる方はもう使わない方がいいです。あれは副作用がありますので。

副作用というのは、ゼロ幅スペースを全文字の間に埋め込んでいるので、コピペしたときにうまくいかないことがあったり、単語の途中でも改行してしまうんです。

例えば、以下の様になります。

JSでやった場合

<div class="wordBreak">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</div>

CSSのみでやった場合

<div class="word_wrap">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</div>

ということなので、古いバージョンのFirefoxにも対応しないといけないということがなければ今後はCSSのみでやったほうがいいようです。

tacamy++