white-space

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

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

構文

/* キーワード値 */
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: unset;

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

normal
連続するホワイトスペースはまとめられます。ソース内の改行文字もホワイトスペースとして扱われます。行ボックスを埋めるために、必要なら行を折り返します。
nowrap
normal と同じくホワイトスペースを詰めますが、行の折り返しは行いません。
pre
連続するホワイトスペースはそのまま残され、行の折り返しは、ソース内の改行文字と、 <br> 要素でのみ行います。
pre-wrap
連続するホワイトスペースはそのまま残されます。行の折り返しは、改行文字や <br> 要素のあるときか、行ボックスを埋めるのに必要なときに行います。
pre-line
連続するホワイトスペースは詰められて 1 つになります。行の折り返しは、改行文字や <br> 要素のあるときか、行ボックスを埋めるのに必要なときに行われます。
break-spaces
下記の点を除いて、動作は pre-wrap と同じです。
  • そのまま残された連続するホワイトスペースは、行末にあるものを含め、空間を占有します。
  • 残されたそれぞれのホワイトスペースの後で、ホワイトスペースの間を含め、改行する可能性があります。
  • そのような残された空白は空間を占有し、ぶら下がらず、ボックスの固有の寸法に (min-content size および max-content size に) 影響します。

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

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

形式文法

normal | pre | nowrap | pre-wrap | pre-line

基本的な例

code { 
  white-space: pre; 
}

<pre> 要素内での改行

pre {
  word-wrap: break-word;      /* IE 5.5-7 */
  white-space: pre-wrap;      /* 現行ブラウザー */
}

操作して確認する

Source

    <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>

CSS + Result

仕様書

仕様書 状態 備考
CSS Text Module Level 3
white-space の定義
草案 折り返しアルゴリズムの詳細を記述。
CSS Level 2 (Revision 1)
white-space の定義
勧告 初回定義
初期値normal
適用対象すべての要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
white-spaceChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 5.5Opera 完全対応 4Safari 完全対応 1WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android ? Safari iOS 完全対応 1Samsung Internet Android ?
break-spacesChrome 完全対応 76Edge 未対応 なしFirefox 完全対応 69IE 未対応 なしOpera 完全対応 62Safari 未対応 なしWebView Android 完全対応 76Chrome Android 完全対応 76Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
preChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 6Opera 完全対応 4Safari 完全対応 1WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android ? Safari iOS 完全対応 1Samsung Internet Android ?
pre-lineChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 8Opera 完全対応 9.5Safari 完全対応 3WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android ? Safari iOS 完全対応 1Samsung Internet Android ?
pre-wrapChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3
完全対応 3
未対応 1 — 3.6
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 完全対応 8
補足
完全対応 8
補足
補足 From Internet Explorer 5.5 to 7, word-wrap: break-word; can be used for line breaks in pre elements.
Opera 完全対応 8Safari 完全対応 3WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android ? Safari iOS 完全対応 1Samsung Internet Android ?
Support in SVGChrome 未対応 なしEdge 完全対応 12Firefox 完全対応 36IE 完全対応 10Opera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 36Opera Android ? Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
Support on <textarea>Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 36IE 完全対応 5.5Opera 完全対応 4Safari 完全対応 1WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 36Opera Android ? Safari iOS 完全対応 1Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報