CSSだけでボックスからはみ出した文字列を折り返す方法

Web制作をしていてスタイルシートでDIVなどボックスを作って
その中に長い文字列があるとはみでてしまうことがある。
とくにURLとか
これをなんとかCSSで自動改行させたい。

全ブラウザではなく一部のブラウザは、横幅で折り返してくれる
やり方があるけど、クロスブラウザで対応させた良いやり方が
思いつかなくて今まで困っていたので、これで解決できそうです！

Wrapping Long URLs and Text Content with CSS
でスタイルシートのみでボックスからはみ出した文字列を
折り返すやり方が紹介されていました。
動作はこちらで確認できます

pre {
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
}

クロスブラウザ対応です。
IE6や日本語、URLも試してみましたが問題なく折り返しくれました。
予想外で簡単！

これは便利！
もっとCSS勉強しないとダメですね。
自動改行のCSS、使わせいただきます。

CSSだけで文字列を省略して「・・・」を付けて表示する方法もあるので、
コンテンツで使い分けていきます。
こっちは対応していないブラウザがあるので注意です！