CSSのwhite-spaceでテキスト内の空白や改行の表示方法を指定する方法をわかりやすく解説

2024.09.15
スポンサーリンク

white-space プロパティは、テキストの改行やスペースの扱い方を制御します。このプロパティを使用することで、テキストがどのように折り返されるか、改行やスペースがどのように表示されるかを指定できます。

スポンサーリンク

white-space プロパティの値とその効果の一覧

  • normal: テキストは通常の改行と折り返しが適用されます。
  • nowrap: テキストは折り返されず、スペースや改行は無視されます。
  • pre: 改行とスペースがそのまま表示されます。折り返しは行われません。
  • pre-wrap: 改行とスペースがそのまま表示され、さらに折り返しも行われます。
  • pre-line: 改行はそのまま表示されますが、連続するスペースは1つにまとめられます。

white-spaceが効かない時の原因と対策

overflowプロパティが干渉している

white-spaceの効果は、テキストが要素の領域を超える際に、overflowプロパティによって制限されることがあります。overflow: hidden;が設定されている場合、white-spaceがnowrapであっても、はみ出したテキストが表示されないことがあります。

対策: 要素のoverflow設定を確認し、必要に応じてoverflow: visible;またはスクロール可能な設定（overflow: auto;）に変更します。これにより、white-spaceによるテキストの折り返しの動作が確認できるようになります。

共通するCSSコード

.css-sample-container {
  border: 1px solid black;
  padding: 10px;
  margin-bottom: 20px;
  width: 300px;
}

.css-sample-content {
  font-size: 16px;
  color: black;
}

white-space: normal

この値はデフォルトで、テキストは通常の改行と折り返しが行われます。複数のスペースや改行は1つにまとめられます。

HTMLコード

<div class="css-sample-container css-sample-normal">
  <p class="css-sample-content">これは   通常のテキストで、改行はありません。</p>
</div>

CSSコード

.css-sample-normal {
  white-space: normal;
}

表示結果

これは 通常のテキストで、改行はありません。

white-space: nowrap

この値では、テキストは折り返されず、一行で表示されます。スペースはそのまま表示されますが、折り返しが無視されるため、要素がはみ出すことがあります。

HTMLコード

<div class="css-sample-container css-sample-nowrap">
  <p class="css-sample-content">これは   折り返しのないテキストです。長い行については改行されず、そのまま表示されます。</p>
</div>

CSSコード

.css-sample-nowrap {
  white-space: nowrap;
}

表示結果

これは 折り返しのないテキストです。長い行については改行されず、そのまま表示されます。

white-space: pre

この値では、改行やスペースがそのまま表示されます。テキストは折り返されません。プレーンテキストのように扱われます。

ソースコードなどのように、そのまま表示したい場合に用いられます。

HTMLコード

<div class="css-sample-container css-sample-pre">
  <p class="css-sample-content">これは
      改行と
      スペースを
      保持します。これは折り返しのないテキストです。長い行については改行されず、そのまま表示されます。</p>
</div>

CSSコード

.css-sample-pre {
  white-space: pre;
}

表示結果

これは 改行と スペースを 保持します。長い行については改行されず、そのまま表示されます。

white-space: pre-wrap

この値では、改行やスペースがそのまま表示され、さらに折り返しも行われます。テキストがはみ出さないように表示されます。

HTMLコード

<div class="css-sample-container css-sample-pre-wrap">
  <p class="css-sample-content">これは
      改行と
      スペースを
      保持しますが、折り返しも行われます。</p>
</div>

CSSコード

.css-sample-pre-wrap {
  white-space: pre-wrap;
}

表示結果

これは 改行と スペースを 保持しますが、折り返しも行われます。

white-space: pre-line

この値では、改行はそのまま表示されますが、連続するスペースは1つにまとめられます。改行の位置は保持されますが、スペースはまとめられるため、見た目が少し異なります。

HTMLコード

<div class="css-sample-container css-sample-pre-line">
  <p class="css-sample-content">これは
      改行を保持しつつ、
      連続するスペースは
      1つにまとめます。</p>
</div>

CSSコード

.css-sample-pre-line {
  white-space: pre-line;
}

表示結果

これは 改行を保持しつつ、 連続するスペースは 1つにまとめます。

まとめ

  • normal: 改行と折り返しは通常通り行われます。
  • nowrap: 折り返しは行われません。
  • pre: 改行とスペースはそのまま保持されます。
  • pre-wrap: 改行とスペースを保持しつつ、折り返しも行われます。
  • pre-line: 改行を保持しつつ、スペースは1つにまとめられます。
スポンサーリンク