white-spaceプロパティ

white-spaceプロパティに指定できる値

white-spaceプロパティには以下のような値を指定することができます。

以降はwhite-spaceプロパティを使ったコードと、ブラウザの使用例を紹介していきます。

使用例

6つのp要素のテキストを用意し、white-spaceプロパティで指定できる6種類の値をそれぞれ設定してブラウザの表示を確認してみましょう。

CSS コード例

.sample1 p {
  font-size: 18px;
  line-height: 1.8;
}
.sample1 .text1 {
  white-space: normal;
}
.sample1 .text2 {
  white-space: nowrap;
}
.sample1 .text3 {
  white-space: pre;
}
.sample1 .text4 {
  white-space: pre-wrap;
}
.sample1 .text5 {
  white-space: pre-line;
}
.sample1 .text6 {
  white-space: break-spaces;
}

HTML コード例

<div class="sample1 first">
  <h2>white-space: normal;</h2>
  <p class="text1">    連続する空白は1つの空白として扱い、改行も空白文字として扱います。
行ボックスを埋めるために、必要に応じて自動的に行を改行します。</p>
</div>
<div class="sample1">
  <h2>white-space: nowrap;</h2>
  <p class="text2">    空白文字の扱いは「normal」と同様ですが、自動的な行の改行を行いません。</p>
</div>
<div class="sample1">
  <h2>white-space: pre;</h2>
  <p class="text3">    テキスト内の空白はそのまま出力されます。
改行は改行コード、もしくはbr要素で行います。</p>
</div>
<div class="sample1">
  <h2>white-space: pre-wrap;</h2>
  <p class="text4">    テキスト内の空白はそのまま出力されます。
改行は改行コード、br要素、または行ボックスを埋めるために必要に応じて自動的に行います。  </p>
</div>
<div class="sample1">
  <h2>white-space: pre-line;</h2>
  <p class="text5">    テキスト内の空白はそのまま出力されます。
改行は改行コード、br要素、または行ボックスを埋めるために必要に応じて自動的に行います。</p>
</div>
<div class="sample1">
  <h2>white-space: break-spaces;</h2>
  <p class="text6">    テキスト内の空白はそのまま出力されます。
改行は改行コード、br要素、または行ボックスを埋めるために必要に応じて自動的に行います。  </p>
</div>

ブラウザで表示してみると以下のようになります。

HTMLは全てのテキストの開始にあえて半角スペースを入れた状態にしており、また改行も入れた状態にあっていますが、white-spaceプロパティの値によって表示に差異があることが分かります。

途中に改行を入れたくないときは「nowrap」を指定したり、テキストの開始に半角スペースを含めたくないときは「pre-line」を指定するなど必要に応じて使い分けができるようになっています。