Webtech Walker

最近はword-breakするのにJSは使わないほうがいいみたい

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>

word-wrapの結果

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>

JSでやると単語の途中で改行される

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>

CSSでやると単語の途中で改行されない

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

tacamy++

このエントリーをはてなブックマークに追加