white-space

white-space は CSS のプロパティで、要素内のホワイトスペースをどのように扱うかを設定します。

試してみましょう

このプロパティは 2 つのことを指定します。

  • ホワイトスペースを折り畳むかどうか、およびその方法。
  • 行を自動折り返しの場面で折り返すことができるかどうか。

メモ: 要素の内部で折り返しを行うには、代わりに overflow-wrap, word-break, hyphens を使用してください。

構文

css
/* キーワード値 */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

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

white-space プロパティは、以下の値の一覧から選択した単一のキーワードで指定します。

normal

連続するホワイトスペースがまとめられます。ソース内の改行文字もホワイトスペースとして扱われます。行ボックスを埋めるために、必要なら行を折り返します。

nowrap

normal と同じくホワイトスペースを詰めますが、行の折り返しは行いません。

pre

連続するホワイトスペースはそのまま残され、行の折り返しは、ソース内の改行文字と、 <br> 要素でのみ行います。

pre-wrap

連続するホワイトスペースはそのまま残されます。行の折り返しは、改行文字や <br> 要素のあるときか、行ボックスを埋めるのに必要なときに行います。

pre-line

連続するホワイトスペースは詰められて 1 つになります。行の折り返しは、改行文字や <br> 要素のあるときか、行ボックスを埋めるのに必要なときに行われます。

break-spaces

下記の点を除いて、動作は pre-wrap と同じです。

  • そのまま残された連続するホワイトスペースは、行末にあるものを含め、空間を占有します。
  • 残されたそれぞれのホワイトスペースの後で、ホワイトスペースの間を含め、改行する可能性があります。
  • そのような残された空白は空間を占有し、ぶら下がらず、ボックスの内在の寸法 (min-content および max-content の大きさ) に影響します。

次の表に、white-space 値の動作をまとめます。

改行 空白とタブ文字 テキストの折り返し 行末の空白 行末のその他の空白区切り
normal まとめる まとめる 折り返す 除去 ぶら下げる
nowrap まとめる まとめる 折り返さない 除去 ぶら下げる
pre そのまま そのまま 折り返さない そのまま 折り返さない
pre-wrap そのまま そのまま 折り返す ぶら下げる ぶら下げる
pre-line そのまま まとめる 折り返す 除去 ぶら下げる
break-spaces そのまま そのまま 折り返す 折り返す 折り返す

メモ: 空白その他の空白区切りには違いがあります。以下のように定義されています。

空白

空白 (U+0020)、タブ (U+0009)、区切り文字 (改行など)。

その他の空白区切り

Unicode で定義されているその他の区切り文字で、空白として定義されているもの以外。

ホワイトスペースがぶら下げるとある場合、内在サイズを計算するときにボックスの大きさに影響することがあります。

公式定義

初期値normal
適用対象すべての要素
継承あり
計算値指定通り
アニメーションの種類離散値

形式文法

white-space = 
normal |
pre |
nowrap |
pre-wrap |
break-spaces |
pre-line

基本的な例

css
code {
  white-space: pre;
}

<pre> 要素内での改行

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

操作

HTML

html
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

結果

仕様書

Specification
CSS Text Module Level 3
# white-space-property

ブラウザーの互換性

BCD tables only load in the browser

関連情報