定義と使い方

white-spaceプロパティは、**2つの事項を指定**します。一つは要素内部の**空白文字をどのように処理**するか、もう一つはコンテンツが **強制されない自動改行位置（at unforced soft wrap opportunities）で改行を許可するかどうか**です。

次は空白文字（White space）という用語に関する簡単な補足説明です。
空白文字（White space）
文字が並ぶ際に、文字と文字の間に空間を提供する文字を意味します。一般的には「スペース（空白）」と呼ばれます。
空白文字には、キーボードのスペース（Space）キーを押すと入力される空白や、タブ（Tab）キーを押すと入力されるタブ、そしてエンター（Enter）キーを押した時の改行があります。
空白文字はテキストの可読性を高めたり、レイアウトを整えたりするなどの役割を果たします。

white-spaceプロパティを使用すると、HTMLソースコードの要素内にある空白（スペース、タブ、改行）をブラウザがどのように処理し、表示するかを制御できます。

基本例

以下の例では、HTMLエディタにソースコードとして記述された要素内の空白や改行が、white-spaceプロパティの値によってどのように表示されるかを確認できます。

HTML 
<p>
    値は次のような意味を持ち、
    これは空白の処理および改行ルールに従って定義されます。
    This is some text.      This is some        text.
</p>
CSS 
p {
    background-color: gold;
    white-space: /* value */
}
CSSライブデモ：white-space デモボタンをクリックしてみてください！

構成プロパティ

white-spaceプロパティは、以下のCSSプロパティを一度に指定できる短縮形プロパティ（shorthand property）です。

white-spaceプロパティの構成プロパティ
white-space-collapse 要素内部の空白文字をどのように処理するかを指定します。
text-wrap-mode 要素内のコンテンツが、強制されない自動改行位置（at unforced soft wrap opportunities）で実際に改行を許可するかどうかを指定します。

参考にしてください！
仕様書では3番目の構成プロパティであるwhite-space-trimを定義していますが、まだ大部分のブラウザには実装されていません。

形式構文

CSS 
selector {
    white-space: normal | pre | pre-wrap | pre-line | <white-space-collapse> || <text-wrap-mode>
}

<white-space-collapse> = 
  collapse         |
  discard          |
  preserve         |
  preserve-breaks  |
  preserve-spaces  |
  break-spaces     

<text-wrap-mode> = 
  wrap    |
  nowrap

構文

CSS 
/* 単一キーワード値 */
white-space: normal;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: nowrap;
white-space: wrap;
white-space: break-spaces;
white-space: collapse;

/* white-space-collapseとtext-wrap-modeの短縮（2つのキーワード）値 */
white-space: preserve nowrap;

/* グローバル値 */
white-space: inherit;
white-space: initial;
white-space: revert;
white-space: revert-layer;
white-space: unset;

値

white-spaceプロパティの値は、white-space-collapseとtext-wrap-modeプロパティの値を表す1つ、または短縮形である2つのキーワードで指定することができ、次のような特殊キーワードも使用可能です。2つのキーワードを使用する場合、スペースで区切れば記述順序は問いません。

短縮形である2つのキーワードの使用は、一部のブラウザのみ互換性があります。ブラウザ互換性を参照してください。

white-spaceプロパティの値
normal 初期値です。
連続する空白を1つにまとめます。ソース（ソースコードを意味します）内の改行（Enterキーを押した時の改行を意味します）は、他の空白文字と同様に処理されます。
必要に応じて（例えば、1行が長すぎる場合など）、テキストがコンテンツボックスの端に到達した際に自動的に改行されます。
この値は、collapse wrapという値と同じです。
nowrap normal値の場合と同様に、連続する空白を1つにまとめます。ソース（ソースコードを意味します）内の改行（Enterキーを押した時の改行を意味します）は、他の空白文字と同様に処理されます。
しかし、normal値とは異なり、テキストがコンテンツボックスの端に到達しても自動的に改行されません。
pre ブラウザが<pre>要素にデフォルトで適用する値です。
この値は、まるでソース（ソースコードを意味します）のプレビュー（Preview）のように実装されます。連続する空白を意図的に1つにまとめることはせず、ソース（ソースコードを意味します）内の改行（Enterキーを押した時の改行を意味します）もそのまま維持し、意図的な空白の縮小は行いません。
テキストがコンテンツボックスの端に到達しても自動的に改行されません。ただし、<br>による強制改行は維持されます。この値は、preserve nowrapという値と同じです。
pre-wrap ブラウザが<textarea>要素にデフォルトで適用する値です。
pre値とすべて同様に実装されますが、normal値の場合のように、必要に応じて（例えば、1行が長すぎる場合など）テキストがコンテンツボックスの端に到達した際に自動的に改行される点が異なります。この値は、preserve wrapという値と同じです。
pre-line この値は、まるでソース（ソースコードを意味します）内の改行（Enterキーを押した時の改行を意味します）のプレビュー（Preview）のように実装されます。
normal値とすべて同様に実装されますが、ソース（ソースコードを意味します）内の改行（Enterキーを押した時の改行を意味します）を空白文字として処理せず、強制的に改行させるという点でnormal値とは異なります。この値は、preserve-breaks wrapという値と同じです。
break-spaces この値は、次を除いてはpre-wrapと同様です。
  • 連続する空白がコンテンツボックスの端にあっても、1つにまとめられません。つまり、連続する空白がスペースを占有します。
  • ただし、連続する空白がスペースを占有したとしても、コンテンツボックスの端の境界をオーバーフロー（overflow、境界を越えること）しません。そのため、コンテンツボックス固有のサイズ（min-contentサイズやmax-contentサイズ）に影響を与えます。
  • 連続する空白の間や末尾でも、自動改行の機会（soft wrap opportunities）が与えられることがあります。

仕様書（https://drafts.csswg.org/css-text-4/#white-space-property）における初期値は normal です。
しかし、大部分のブラウザではスタイルシートのデフォルト値として、<pre> 要素には pre、<textarea> 要素には pre-wrap を指定しています。

以下は、様々な white-space プロパティの値の実装をまとめた表です。

white-spaceプロパティの値の実装をまとめた表
white-spaceプロパティの値 Enter Space, Tab テキストの自動改行 行末の空白 行末のその他の空白区切り文字
normal 合算して縮小（Collapse） 合算して縮小（Collapse） 改行許可（Wrap） 除去（Remove） ぶら下げ（Hang）
nowrap 合算して縮小（Collapse） 合算して縮小（Collapse） 改行なし（No wrap） 除去（Remove） ぶら下げ（Hang）
pre 維持（Preserve） 維持（Preserve） 改行なし（No wrap） 維持（Preserve） 改行なし（No wrap）
pre-wrap 維持（Preserve） 維持（Preserve） 改行許可（Wrap） ぶら下げ（Hang） ぶ라下げ（Hang）
pre-line 維持（Preserve） 合算して縮小（Collapse） 改行許可（Wrap） 除去（Remove） ぶら下げ（Hang）
break-spaces 維持（Preserve） 維持（Preserve） 改行許可（Wrap） 改行許可（Wrap） 改行許可（Wrap）

その他の空白区切り文字：すでに空白として定義されているもの（Enter、Space、Tab）を除いた、Unicodeで定義されているその他すべての空白区切り文字。

ぶら下げ（Hang）：該当する空白文字が行末に残っても改行を誘発せず、行の末尾に「ぶら下げる」動作を意味します。

ブラウザが <pre> 要素にデフォルトで適用する値：pre

HTML 
<pre style="width:250px; background-color:gold;">
    値は次のような意味を持ち、
    これは空白処理および改行規則に従って実装されます。
    This is some text.      This is some        text.
</pre>

コードの補足説明
<pre> 要素は、作成した書式を維持したテキストブロックを表す際に使用します。つまり、この要素を使用すると、インデント、改行、空白など、作成したままのオリジナルの書式がブラウザに表示されます。

実際の適用例

ブラウザが <textarea> 要素にデフォルトで適用する値：pre-wrap

HTML 
<textarea style="width:250px; height:120px; background-color:gold;">
    値は次のような意味を持ち、
    これは空白処理および改行規則に従って実装されます。
    This is some text.      This is some        text.
</textarea>
実際の適用例

形式定義

white-spaceプロパティの形式定義
初期値 normal
適用対象 すべての要素
継承 はい
アニメーション いいえ

最終更新日:

white-spaceプロパティと値のブラウザ互換性
プロパティと値
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
white-space 1 12 1 1
break-spaces 76 79 69 13.1
collapse 114 114 124 18
normal 1 12 1 1
nowrap 1 12 1 1
pre 1 12 1 1
pre-line 1 12 3.5 3
pre-wrap 1 12 3 3
preserve 114 114 124 18
preserve-breaks 114 114 124 18
wrap 114 114 124 18
preserve-spaces いいえ いいえ 124 いいえ
2つのキーワードの短縮値の許容
(white-space-collapse と text-wrap-mode)		 114 114 124 いいえ
SVG要素への適用 いいえ いいえ 36 いいえ

caniuse.comで詳しい情報をご確認ください。

仕様書

white-spaceプロパティの仕様書
仕様書
white-space CSS Text Module Level 4
#white-space-property
white-space-collapse CSS Text Module Level 4
#white-space-collapsing
text-wrap-mode CSS Text Module Level 4
#text-wrap-mode

参考資料

関連項目