「word-wrap break-word」で長い半角英数文字列を強制改行させる

半角英数で、途中にスペースのない長い文字をHTMLに書くと、ブラウザはそれを「１つの単語」と認識して改行してくれません。
具体的にはこういう感じ↓

abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345

ちなみに日本語など全角文字であれば、どのタイミングでも改行してくれます。２バイト文字は複雑で、種類も多く、「単語」とは判定しづらいんでしょうね。

さて、この問題、これまでだと、PHPで無理やり処理して、１文字毎に空文字やスペースをサンドイッチ状に挟みこむことでごまかして改行したり、クライアントに対して「そんな長い単語ないでしょ」で説得したり、妥協ともいえる方法で片付けてきました。
しかし、調べてみるとあっさりとした解決法が見つかりました。CSSのword-wrapプロパティです。

例えば以下のように指定してあげます。

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

そうすると、先ほどの文字列がこのようになるんですね↓

abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345

簡単ですね。IE6、最新のFirefox、Google Chromeでも問題ないようです。
しかし、このプロパティはCSS3のプロパティを先行採用したものらしく、validationチェックを通らない場合がありますので、場面に応じて使いわけたほうがよいかもしれませんね。

いや、でもやっぱりそんな長い単語はないでしょう。