[ CSS ] pre でも改行を生かしたまま折り返す

pre 要素で囲んだ一行が長い場合、親要素の幅に収まりきらず、スクロールバーが出てしまいます。なんとか親要素の幅内で収めたい。

で、適当な位置で改行するように、

pre {
    overflow: auto;
    white-space: normal;
}

なる CSS を追加したのですが、今度は、私が追加した任意の改行まで無くなってしまいました。

調べてみると、下のようなコードを追加すると、改行を生かしたまま折り返してくれます。

pre {
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: pre-wrap;      /* CSS3 */
    word-wrap: break-word;      /* IE 5.5+ */
}

プログラムコードなんかの時は、折り返さずにスクロールバーを出して、一行のまま表示するのが良いのかな？

この記事の目次非表示

追記 @ 2007/06/28
- 検証に使ったサンプルコード
各ウェブブラウザでの表示結果
検証結果
追加の情報

追記 @ 2007/06/28

コメントを頂いたので、ちょっと突っ込んで調べてみました。

検証に使ったサンプルコード

https://codepen.io/darucub/pen/ogxbxeq

各ウェブブラウザでの表示結果

Windows XP + Internet Explorer 7.0

全ての行が折り返されている。

Windows XP + Internet Explorer 6.0

全ての行が折り返されている。

Windows XP + Internet Explorer 5.5

全ての行が折り返されている。

Windows XP + Firefox 2.0

半角スペースを含んでいる行は折り返されている。

Mac OS 10.4.10 + Safari 2.0

全ての行が折り返されている。

Mac OS 10.4.10 + Firefox 2.0

半角スペースを含んでいる行は折り返されている。

Mac OS 10.4.10 + Opera 9.2

半角スペースを含んでいる行は折り返されている。さらに半角スラッシュで折り返し？

Mac OS 10.4.10 + Shiira 1.2

全ての行が折り返されている。

Mac OS 10.4.10 + Internet Explorer 5.2

全ての行が折り返されない。

検証結果

Mac IE 5.2 以外は、半角スペースが入っている所で折り返してくれるみたい。

追加の情報

white-space: pre-wrap – えむもじらによると、Firefox 3 で white-space: pre-wrap; がサポートされ、従来使用されていた -moz-pre-wrap は削除予定なんだそうな。
Mozilla Japan ブログ – Firefox 3 の修正内容のご紹介その 3 — URL も改行されるように
それとは別に <wbr> と言うタグもあるらしい。未確認ですが…。

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について 記載している内容は記事執筆時の情報です。できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。