このページで解説するコードの実行結果。

<table> <tr> <td> 🍎ホワイト・スペースの表示方法について設定する。🍎 </td> </tr> </table>
<table> <tr> <td> 🍎ホワイト・スペースの表示方法について設定する。🍎 </td> </tr> </table>
<table> <tr> <td> 🍎ホワイト・スペースの表示方法について設定する。🍎 </td> </tr> </table>
<table> <tr> <td> 🍎ホワイト・スペースの表示方法について設定する。🍎 </td> </tr> </table>
<table> <tr> <td> 🍎ホワイト・スペースの表示方法について設定する。🍎 </td> </tr> </table>
<table> <tr> <td> 🍎ホワイト・スペースの表示方法について設定する。🍎 </td> </tr> </table>

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。

CSS : デフォルトCSS
div {
    max-width:          15em;           /*  最大幅 */
    color:              purple;         /*  文字の色 */
    background-color:   #fef;           /*  背景色 */
    margin-right:       5em;            /*  右マージン */
}

white-spaceの概要

ホワイト・スペースの表示方法について設定する。

(表) ホワイト・スペース一覧
スペース&#32;
タブコード&#9;
改行コード&#10;※ キャリッジ・リターン(&#13;
(表) white-spaceの設定値
設定値改行コードを
1つのスペースに
スペース/タブコードを
1つのスペースに
あふれた場合の改行デフォルト
pre×××
pre-wrap××
pre-line×
normal
nowrap×
break-spaces××

break-spacesは新しい設定値(そして草案段階)であるので、ほとんどのブラウザは対応していない。よって使わない方がよい。

white-space未設定の例は以下。(デフォルト値のnormalと同じ結果)

HTML : 適用するHTML
<div class="sample">
    &lt;table&gt;
        &lt;tr&gt;
            &lt;td&gt;
                🍎ホワイト・スペースの表示方法について設定する。🍎
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
</div>
実行結果
<table> <tr> <td> 🍎ホワイト・スペースの表示方法について設定する。🍎 </td> </tr> </table>

pre

  • ホワイト・スペース : そのまま表示
  • あふれた場合 : そのまま放置(=自動改行しない)
CSS : pre
.sample  {
    white-space: pre;
}
実行結果
<table> <tr> <td> 🍎ホワイト・スペースの表示方法について設定する。🍎 </td> </tr> </table>

pre-wrap

  • ホワイト・スペース : そのまま表示
  • あふれた場合 : 折り返す(=自動改行する)
CSS : pre-wrap
.sample  {
    white-space: pre-wrap;
}
実行結果
<table> <tr> <td> 🍎ホワイト・スペースの表示方法について設定する。🍎 </td> </tr> </table>

pre-line

  • スペース/タブコード : 1つのスペースにまとめる
  • 改行コード : そのまま表示
  • あふれた場合 : 折り返す(=自動改行する)
CSS : pre-line
.sample  {
    white-space: pre-line;
}
実行結果
<table> <tr> <td> 🍎ホワイト・スペースの表示方法について設定する。🍎 </td> </tr> </table>

normal

  • ホワイト・スペース : 1つのスペースにまとめる
  • あふれた場合 : 折り返す(=自動改行する)
CSS : normal
.sample  {
    white-space: normal;
}
実行結果
<table> <tr> <td> 🍎ホワイト・スペースの表示方法について設定する。🍎 </td> </tr> </table>

nowrap

  • ホワイト・スペース : 1つのスペースにまとめる
  • あふれた場合 : そのまま放置(=自動改行しない)
CSS : nowrap
.sample  {
    white-space: nowrap;
}
実行結果
<table> <tr> <td> 🍎ホワイト・スペースの表示方法について設定する。🍎 </td> </tr> </table>

break-spaces

pre-wrapとほぼ同じであるが、最終行の文末のホワイト・スペースの扱いが異なる。

草案段階のCSS3で追加された設定であるが、主要なブラウザはサポートしていない。

CSS : break-spaces
.sample  {
    white-space: break-spaces;
}
実行結果
<table> <tr> <td> 🍎ホワイト・スペースの表示方法について設定する。🍎 </td> </tr> </table>

併用するCSSプロパティ

overflowプロパティ

上記のように、prenowrapを指定した場合、親のブロック要素からあふれでる場合がある。

その場合、どのように表示させるか。

非表示 : hidden

CSS : hidden
.sample  {
    white-space:    pre;
    overflow:       hidden;
}
実行結果

スクロールさせる : scroll

CSS : scroll
.sample  {
    white-space:    pre;
    overflow:       scroll;
}
実行結果
<table> <tr> <td> 🍎ホワイト・スペースの表示方法について設定する。🍎 </td> </tr> </table>

Emmet : whs

記述Visual Studio Code
whswhite-space: nowrap;
whspwhite-space: pre;
whspwwhite-space: pre-wrap;
whsplwhite-space: pre-line;
whsnwhite-space: normal;