概要へ移動

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

nowrap
<table> <tr> <td> 🍎ホワイト・スペースの表示方法について設定する。🍎 </td> </tr> </table>
normal
<table> <tr> <td> 🍎ホワイト・スペースの表示方法について設定する。🍎 </td> </tr> </table>
pre-line
<table> <tr> <td> 🍎ホワイト・スペースの表示方法について設定する。🍎 </td> </tr> </table>
pre-wrap
<table> <tr> <td> 🍎ホワイト・スペースの表示方法について設定する。🍎 </td> </tr> </table>
pre : あふれた場合、放置
<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の設定値
設定値改行コードを
１つのスペースに		スペース／タブコードを
１つのスペースに		あふれた場合の改行デフォルト
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

  • スペース／タブコード : １つのスペースにまとめる
  • 改行コード : そのまま表示
  • あふれた場合 : 折り返す（＝自動改行する）
CSS : pre-line
.sample  {

    white-space: pre-line;

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

normal

  • ホワイト・スペース : １つのスペースにまとめる
  • あふれた場合 : 折り返す（＝自動改行する）
CSS : normal
.sample  {

    white-space: normal;

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

nowrap

  • ホワイト・スペース : １つのスペースにまとめる
  • あふれた場合 : そのまま放置（＝自動改行しない）
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プロパティ

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

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

非表示 : 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;