CSS プロパティ white-space

CSS プロパティ white-space: ウェブページのテキストにおける空白と改行の制御

white-space プロパティは、テキストレンダリング時に空白文字と改行をどのように処理するかを制御するための重要なCSSプロパティです。開発者は、このプロパティを使用して、ウェブページ上のテキストの表示方法を細かく調整し、すべての空白を保持することから自動改行まで、さまざまな効果を実現できます。この記事では、white-space プロパティの各値とその役割について詳しく説明し、サンプルコードを示して、このプロパティをより深く理解し、効果的に使用できるようにします。

1. white-space プロパティ値の詳細

white-space プロパティには、以下の値を設定できます。

値	説明
`normal` (デフォルト)	空白文字列を統合し、必要に応じて改行します。これはブラウザのデフォルトの動作です。複数の連続した空白文字（スペース、タブ、改行）は1つのスペースにまとめられ、テキストはコンテナの境界に達すると自動的に改行されます。
`pre`	すべての空白文字と改行を保持します。HTMLの`<pre>`タグと同様の動作をします。この値を使用すると、テキストはコード内の書式に従って厳密に表示されます。すべてのスペース、タブ、改行が保持されます。
`nowrap`	空白文字列を統合しますが、自動改行は許可しません。テキストは、`<br>`タグまたはその他の強制改行要素が見つかるまで、同じ行に表示されます。この値は、狭いスペースに収まるようにテキスト全体を表示し、予期しない改行を防ぐ必要がある場合によく使用されます。
`pre-wrap`	すべての空白文字を保持しますが、必要に応じて改行を許可します。この値は、`pre`と`nowrap`の機能を組み合わせたもので、コード内の空白文字を保持しながら、コンテナの境界でテキストを自動的に改行できるようにします。
`pre-line`	空白文字列を統合しますが、改行は保持します。この値は、連続するスペースやタブを1つのスペースにまとめますが、コード内の改行は保持するため、テキストの表示形式がコードの元の構造に近くなります。
`break-spaces`	`pre-wrap`に似ていますが、連続するスペースを1つの塊として扱って改行します。この値は、連続するスペースの処理において`pre-wrap`とは異なり、連続するスペースを分割できない1つの塊として扱い、その塊が同じ行に収まらない場合は、スペースシーケンス全体を次の行に移動します。

1.1. コード例

以下は、各white-spaceプロパティ値の効果を示すサンプルコードです。

`normal`

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
}
</style>
<div class="container">
  これは     white-space: normal;
  が適用されたテキストです。
</div>

`pre`

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  white-space: pre;
}
</style>
<div class="container">
  これは     white-space: pre;
  が適用されたテキストです。
</div>

`nowrap`

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  white-space: nowrap;
}
</style>
<div class="container">
  これはwhite-space: nowrap;が適用された非常に長いテキストです。
</div>

`pre-wrap`

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  white-space: pre-wrap;
}
</style>
<div class="container">
  これは     white-space: pre-wrap;
  が適用されたテキストです。
</div>

`pre-line`

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  white-space: pre-line;
}
</style>
<div class="container">
  これは     white-space: pre-line;
  が適用されたテキストです。
</div>

`break-spaces`

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  white-space: break-spaces;
}
</style>
<div class="container">
  これは     white-space: break-spaces;
  が適用されたテキストです。
</div>

2. `white-space` プロパティの使用例

white-spaceプロパティは、以下のような場合に役立ちます。

コードの表示: white-space: pre; または <pre> タグを使用すると、コードスニペットを明確に表示し、コードの元のフォーマットを保持できます。
表のレイアウト: 表のセルに white-space: nowrap; を使用すると、テキストコンテンツが長すぎてセルが伸びないようにし、表のレイアウトを安定させることができます。
ボタンのテキスト: ボタンに white-space: nowrap; を設定すると、ボタンのテキストが長すぎる場合に自動改行が発生するのを防ぎ、ボタンのシンプルさを維持できます。

3. まとめ

white-space プロパティは、開発者にテキストの表示方法を柔軟に制御する方法を提供します。このプロパティを適切に使用することで、ウェブページの視覚効果とユーザーエクスペリエンスを向上させることができます。

よくある質問

Q1: white-space プロパティは、すべてのブラウザでサポートされていますか?

A1: はい、white-space プロパティは、すべての主要なブラウザでサポートされています。ただし、一部の古いブラウザでは、すべての値がサポートされていない場合があります。詳細については、Can I use ウェブサイトを参照してください。

Q2: white-space プロパティと word-break プロパティの違いは何ですか?

A2: white-space プロパティは、空白文字と改行の処理方法を制御しますが、word-break プロパティは、単語の改行方法を制御します。word-break プロパティの詳細については、MDN Web Docs を参照してください。

Q3: white-space: nowrap; を設定した要素内でテキストを強制的に改行するにはどうすればよいですか?

A3: white-space: nowrap; を設定した要素内でテキストを強制的に改行するには、<br> タグを使用するか、word-break: break-all; などの word-break プロパティを使用します。