[ 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

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

### 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 – えむもじら](http://level.s69.xrea.com/mozilla/index.cgi?id=20080221_pre-wrap) によると、Firefox 3 で white-space: pre-wrap; がサポートされ、従来使用されていた -moz-pre-wrap は削除予定なんだそうな。
– Mozilla Japan ブログ – Firefox 3 の修正内容のご紹介 その 3 — URL も改行されるように
– それとは別に `` と言うタグもあるらしい。 未確認ですが…。