[CSS]preタグ内の文章を改行する方法

CSSスニペット

2014.04.122015.08.19

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

pre {

white-space: -moz-pre-wrap;

white-space: -pre-wrap;

white-space: -o-pre-wrap;

white-space: pre-wrap;

}

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

1	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

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

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