white-space

CSSプロパティ「white-space」の解説とサンプル。

ソース内のスペースや改行の表示方法を指定するプロパティ。

HTMLソースに書かれたテキストを、brタグを使わずに改行したり、連続するスペースを1個の半角スペースに置き換えたりすることができる。

pre	ソース内の改行やスペースを、ボックスの大きさに関わらずそのまま表示する。
nowrap	ソース内の改行やスペースを、ボックスの大きさに関わらず1個の半角スペースに置き換えて表示する。（改行されず1行で表示される）
normal	初期値。ソース内の改行やスペースを1個の半角スペースに置き換えて表示するが、ボックスの大きさが指定されている場合は、その範囲内で自動改行される。

[CSSの記述]

.sampleA1 { width:300px; background:#def; }
.sampleA2 { white-space:normal; }

[HTMLの記述]

<div class="sampleA1">
<p class="sampleA2">値をnormalにした場合。
pタグ内の改行を半角スペースに・・・</p>
</div>

[ブラウザ上の表示]

値をnormalにした場合。 pタグ内の改行を半角スペースに置き換え表示し、親ボックスの範囲内で自動改行される。

[CSSの記述]

.sampleB1 { width:300px; background:#def; }
.sampleB2 { white-space:pre; }

[HTMLの記述]

<div class="sampleB1">
<p class="sampleB2">値をpreにした場合。
pタグ内の改行がそのまま・・・</p>
</div>

[ブラウザ上の表示]

値をpreにした場合。
pタグ内の改行がそのまま表示され、ボックスの範囲を超えても自動改行されない。

[CSSの記述]

.sampleC1 { width:300px; background:#def; }
.sampleC2 { white-space:pre; }

[HTMLの記述]

<div class="sampleC1">
<p class="sampleC2">値をnowrapにした場合。
pタグ内の改行が半角スペースに・・・</p>
</div>

[ブラウザ上の表示]

値をnowrapにした場合。 pタグ内の改行が半角スペースに置き換わる。

CSSレイアウト実践講座カテゴリ