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: inherit;
white-space: initial;
white-space: unset;

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

normal
連続する空白はまとめられます。ソース内の改行文字も空白文字として扱われます。行ボックスを埋めるために、必要なら行を折り返します。
nowrap
normal と同じく空白を詰めますが、行の折り返しは行いません。
pre
連続する空白はそのまま残され、行の折り返しは、ソース内の改行文字と、 <br> 要素でのみ行います。
pre-wrap
連続する空白はそのまま残されます。行の折り返しは、改行文字や <br> 要素のあるときか、行ボックスを埋めるのに必要なときに行います。
pre-line
連続する空白は詰められて 1 つになります。行の折り返しは、改行文字や <br> 要素のあるときか、行ボックスを埋めるのに必要なときに行われます。

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

  改行 空白とタブ文字 テキストの折り返し
normal 詰める 詰める 折り返す
nowrap 詰める 詰める 折り返さない
pre 残す 残す 折り返さない
pre-wrap 残す 残す 折り返す
pre-line 残す 詰める 折り返す

形式文法

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

基本的な例

code { 
  white-space: pre; 
}

<pre> 要素内での改行

pre {
  word-wrap: break-word;      /* IE 5.5-7 */
  white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
  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
適用対象全要素
継承あり
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応11215.541
pre1121641
pre-wrap112

3

1 — 3.6 -moz-

8183
pre-line1123.589.53
Support on <textarea>1 ?365.541
Support in SVG なし ?36 ? ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 ? ? あり ? ? ? ?
pre ? ? ? ? ? ? ?
pre-wrap ? ? ? ? ? ? ?
pre-line ? ? ? ? ? ? ?
Support on <textarea> ? ? ? ? ? ? ?
Support in SVG ? ? ? ? ? ? なし

1. From Internet Explorer 5.5 to 7, word-wrap: break-word; can be used for line breaks in pre elements.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, mitsuba-clover, Sebastianz, ethertank, sosleepy
最終更新者: mfuji09,