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

[toton]

white-space: pre-wrap;

[makoto_69]

pre

[spread_bomb]

<pre>タグ用のcss参考

[suireN]

<pre>タグの中で折り返す

[forcutie]

改行 white-space

[gaochao]

pre関連で役立ちました

[erf]

各OS、ブラウザで検証したサンプルあり。

[tofu-kun]

わりと困っている人がいっぱいいた。

[poohkuma]

preタグの中身を画面サイズに合わせて改行する