【CSS】改行を含むテキストの表示をスタイルシートで？

Tweet

Category css, html5 2013/04/18

問題

以下のような改行を含むテキストがあって、ブラウザの画面に表示したいんだけど、こういうときはphpのnl2br()を使うんだっけ？

改行を含むテキスト
あいうえおかきくけこ
本日は晴天なり

↓ nl2br($str)

改行を含むテキスト<br />
あいうえおかきくけこ<br />
本日は晴天なり

答え

それでもいいんだけど、スタイルシートで対応するのはどう？

<div style="white-space:pre-wrap;">改行を含むテキスト
あいうえおかきくけこ
本日は晴天なり</div>

↓ ほら。

事例

twitterがPC版で改行の表示を対応したとき、white-space:pre-wrap;したみたいです。

ブラウザの対応状況は？

white-space:pre-wrap;はIE6以前がだめらしい。今なら使っても大丈夫でしょう。

「HTMLで改行といったら<br />でしょ」という固定観念を持ってしまいがちですが、改行の見せ方もブラウザ側で調整するのが当たり前になっていくかもしれません。

そうなると、サーバー側の処理がちょっと減ってうれしいなと思ったりします。

さらにメモ

twitterを見習ってword-wrap:break-word;も設定すると、ブラウザが単語扱いして折り返しせずにボックスをはみ出すような文字列も、ボックス内で折り返してくれる。

white-space:pre-wrap だけ

white-space:pre-wrap と word-wrap:break-word