スポンサード

CSS のwhite-space プロパティのpre-wrap を使って、pre タグ内のテキストやコードを幅に合わせて改行する方法のご紹介です。

pre タグ内のテキストを改行

pre タグ内のテキストを自動改行させるには、CSS で以下のように指定します。

pre	{
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	white-space: pre-wrap;
}

white-space: pre-wrap; を指定することで、以下のようにpre タグの幅に合わせて中のテキストが折り返すようになります。

white-space プロパティ

参考までに、要素内の空白文字の扱いを定義するプロパティwhite-space について引用させていただきました。

white-space プロパティの値

normal	連続する空白は詰められて 1 つになります。ソース内の改行文字も空白文字として扱われます。行ボックスを埋めるために、必要なら行を折り返します。
nowrap	normal と同じく空白を詰めますが、行の折り返しは行いません。
pre	連続する空白はそのまま残され、行の折り返しは、ソース内の改行文字と、 <br> 要素でのみ行います。
pre-wrap	連続する空白はそのまま残されます。行の折り返しは、改行文字や <br> 要素のあるときか、行ボックスを埋めるのに必要なときに行います。
pre-line	連続する空白は詰められて 1 つになります。行の折り返しは、改行文字や <br> 要素のあるときか、行ボックスを埋めるのに必要なときに行われます。

改行やテキストの折り返しのまとめ

	改行	空白とタブ文字	テキストの折り返し
normal	詰める	詰める	折り返す
nowrap	詰める	詰める	折り返さない
pre	残す	残す	折り返さない
pre-wrap	残す	残す	折り返す
pre-line	残す	詰める	折り返す

スポンサード