white-space

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

試してみましょう

このプロパティは 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-collapse および text-wrap の一括指定値 */
white-space: collapse balance;
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 プロパティの一括指定を表す 2 つの値として指定できます。

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 そのまま そのまま 折り返す 折り返す 折り返す

タブの既定値は 8 文字で、 tab-size プロパティを使用して設定できます。normalnowrappre-line の値の場合、すべてのタブは空白文字 (U+0020) 文字に変換されます。

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

空白

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

その他の空白区切り

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

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

ホワイトスペースの統合

white-space-collapse プロパティのページにおいて、ブラウザーのホワイトスペースの統合アリゴリズムを説明しています。

公式定義

初期値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
<table>
  <tr>
    <td></td>
    <td>Very long content that splits</td>
    <td class="nw">Very long content that don't split</td>
  </tr>
  <tr>
    <td class="nw">white-space:</td>
    <td>normal</td>
    <td>nowrap</td>
  </tr>
</table>

CSS

css
table {
  border-collapse: collapse;
  border: solid black 1px;
  width: 250px;
  height: 150px;
}
td {
  border: solid 1px black;
  text-align: center;
}
.nw {
  white-space: nowrap;
}

結果

SVG の text 要素内の複数行

CSS の white-space プロパティで、既定では折り返しを行わない <text> 要素を複数行にすることができます。

HTML

<text> 要素内のテキストは、改行が検出されるように複数行に分割する必要があります。最初の行の後、残りの行は空白を削除する必要があります。

html
<svg viewBox="0 0 320 150">
  <text y="20" x="10">Here is an English paragraph
that is broken into multiple lines
in the source code so that it can
be more easily read and edited
in a text editor.
  </text>
</svg>

CSS

css
text {
  white-space: break-spaces;
}

結果

仕様書

Specification
CSS Text Module Level 4
# white-space-property
Scalable Vector Graphics (SVG) 2
# TextWhiteSpace

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
white-space
break-spaces
normal
nowrap
pre
pre-line
pre-wrap
Accepts shorthand values
Experimental
On SVG elements
Support on <textarea>

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報