[ 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 —-

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

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

Windows XP + Internet Explorer 7.0

pre-wrap-win-ie7.gif

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

Windows XP + Internet Explorer 6.0

pre-wrap-win-ie6.gif

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

Windows XP + Internet Explorer 5.5

pre-wrap-win-ie55.gif

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

Windows XP + Firefox 2.0

pre-wrap-win-firefox2.gif

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

Mac OS 10.4.10 + Safari 2.0

pre-wrap-mac-safari2.gif

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

Mac OS 10.4.10 + Firefox 2.0

pre-wrap-mac-firefox2.gif

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

Mac OS 10.4.10 + Opera 9.2

pre-wrap-mac-opera9.gif

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

Mac OS 10.4.10 + Shiira 1.2

pre-wrap-mac-shiira1.gif

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

Mac OS 10.4.10 + Internet Explorer 5.2

pre-wrap-mac-ie5.gif

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

検証結果

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

追加の情報

投稿日付
2005/10/26 水曜日 9:44:36
カテゴリー
CSS
タグ

12つもコメントがあります

  • IP-Network - Road to IPv6 - | 2005.10.29 2:08

    css/<pre>タグカスタマイズ

    以前、<div id=”command-info”>を作成し、コマン…

  • かもも | 2006.08.02 0:42

    これがこのブログだけ使えるのですか？テストやりたいね１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１２２２２２２２２２２２２２２
    かももでーす。

  • LibertyBoy | 2006.09.24 7:11

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

    preタグをソースコード表示用に使うとスクロールバーが出てしまうので調べてみました。 cssで解決するんですね．．．φ(…

  • なるみ | 2007.06.27 10:07

    はじめまして。
    スクロールバーが出てしまうのでpreでも改行できるソースを探してたどり着きました。
    おかげさまでほとんどのブラウザで改行を生かしたまま折り返してくれます。
    ただSafariだけが改行できずスクロールバーが出てきてしまいます。
    再度様々なサイトを調べていますが、どこかSafariも解決できるソースがありますでしょうか？

  • Bowz | 2007.06.28 16:04

    皆様コメントありがとうございます。返信が遅れてゴメンナサイ。

    ｢ かもも ｣ さんへ
    Firefox では、スペースを含まない行の折り返しはできないみたいですね。私のブラウザでは、コメントが折り返さずに表示されておりますｗ

    ｢ なるみ ｣ さんへ
    私の環境 ( Mac OS 10.4.10 + Safari 2.0.4 ) では、折り返して表示されていますね。環境依存の問題なんでしょうか？

  • links for 2009-08-25 | 空が好きな人のメモ帳 | 2009.08.26 5:03

    [...] [ CSS ] pre でも改行を生かしたまま折り返す | Bowz::Notebook (tags: CSS) Date: 2009-8-26 (水) 5:02:44 No Comments Category: bookmark [...]

  • 失業SEの開発日誌 | 2009.12.18 17:29

    &lt;pre&gt;タグで折り返しを有効にする

    参考になりました。

  • 通りすがり | 2010.03.10 9:36

    preがieでうまくwrapされずに困っていたところこちらにたどり着きました。これだけの情報を自分で調べるとしたらどれだけ時間がかかってたかわかりません。そもそもこれだけ網羅できるかも。貴重な情報を公開いただきありがとうございました。助かりました。

  • Bowz | 2010.03.10 13:37

    通りすがりさん、コメントありがとうございます。
    お役に立ててなによりです。

  • AfroNamiHeiの箱 : WordPressのテーマ、WPTP-Chocolateのスタイルシート編集再び | 2010.03.15 19:02

    [...] [ CSS ] pre でも改行を生かしたまま折り返す | Bowz::Notebook [...]

  • preタグ内の折り返し | （新）なんとなく・なにげなく | 2011.05.10 15:57

    [...] 参考サイト様 http://bowz.info/409 [...]

  • pc.casey.jp » [CSS] Preタグでソースコードを表示する | 2011.09.23 0:05

    [...] [ CSS ] pre でも改行を生かしたまま折り返す | Bowz::Notebook [...]