SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
てるてる動画

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

問題

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

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

nl2br($str)

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

答え

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

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

↓ ほら。

pre-wrap

事例

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

br

ブラウザの対応状況は?

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

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

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


さらにメモ

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

white-space:pre-wrap だけ

このボックスは300pxしかありません 改行を含むテキスト あいうえおかきくけこ 長いURLなどの文字列 http://wwwwwwwwwwwwwwwwwwwwwwwwwwwww.example.example.example.example.com/pathhhhhhhhhhhhhhhhhhhhhhhhhhhhh 本日は晴天なり

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

このボックスは300pxしかありません 改行を含むテキスト あいうえおかきくけこ 長いURLなどの文字列 http://wwwwwwwwwwwwwwwwwwwwwwwwwwwww.example.example.example.example.com/pathhhhhhhhhhhhhhhhhhhhhhhhhhhhh 本日は晴天なり

関連するメモ

コメント