white-space

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

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

white-space

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

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

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

使用例 - サンプル(A) / サンプル(B) / サンプル(C)

サンプル(A)

[CSSの記述]

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

[HTMLの記述]

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

[ブラウザ上の表示]

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

サンプル(B)

[CSSの記述]

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

[HTMLの記述]

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

[ブラウザ上の表示]

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

サンプル(C)

[CSSの記述]

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

[HTMLの記述]

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

[ブラウザ上の表示]

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