• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

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



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください