CSS white-spaceプロパティ

white-spaceプロパティは、**2つの事項を指定**します。

• 一つは要素内部の**空白文字をどのように処理**するか、
• もう一つはコンテンツが **強制されない自動改行位置（at unforced soft wrap opportunities）で改行を許可するかどうか**です。

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

基本例

<p>
    値は次のような意味を持ち、
    これは空白の処理および改行ルールに従って定義されます。
    This is some text.      This is some        text.
</p>

p {
    background-color: gold;
    white-space: /* value */
}

 

形式構文

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

 

構文

/* 単一キーワード値 */
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つのキーワードを使用する場合、スペースで区切れば記述順序は問いません。

• 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と同様です。

参考資料

CSS white-spaceプロパティ：正しい理解と使用方法

CSS white-spaceプロパティ：正しい理解と使用方法 - codingEverybody

 

CSS white-space 속성 – 올바른 이해와 사용 방법

CSS white-space 속성 – 올바른 이해와 사용 방법 - 코딩에브리바디

 

CSS white-space Property – Specifies White Space and Soft Wrapping

CSS white-space Property – Specifies White Space and Soft Wrapping - codingCourses