white-space

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

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

構文

/* キーワード値 */
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 | pre | nowrap | pre-wrap | pre-line

例

基本的な例

code { 
  white-space: pre; 
}

<pre> 要素内での改行

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

操作して確認する

    <div id="css-code" class="box">
      p { white-space: <select>
        <option>normal</option>
        <option>nowrap</option>
        <option>pre</option>
        <option>pre-wrap</option>
        <option>pre-line</option>
        <option>break-spaces</option>
      </select> }
    </div>
    <div id="results" class="box">
    <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>
    </div>

.box {
  width: 300px;
  padding: 16px;
  border-radius: 10px;
}

#css-code {
  background-color: rgb(220,220,220);
  font-size: 16px;
}

#results {
  background-color: rgb(230,230,230);
  overflow-x: scroll;
  height: 400px;
  white-space: normal;
  font-size: 14px;
}

var select  = document.querySelector("#css-code select");
var results = document.querySelector("#results p");
select.addEventListener("change", function(e) {
  results.setAttribute("style", "white-space: "+e.target.value);
})

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

仕様書

ブラウザーの互換性

関連情報

• 内部での折り返しを定義するプロパティ: overflow-wrap, word-break, hyphens