white-space

white-spaceは、半角スペース、タブ文字、改行の表示方法を指定するスタイルです。

解説

HTMLに記載した半角スペース、タブ文字、改行の表示方法を指定します。
既定値では、HTML上に半角スペースが沢山並んでいても１つの半角スペースとして表示されます。同様にHTML上で改行してあったとしてもブラウザ上では改行はされません。

こうした時にHTMLの記載通りに表示したい場合にwhite-spaceを使用します。

構文は以下になります。

white-space: 値;

white-spaceには以下の値が指定できます。

値	説明
normal	連続した半角スペース、タブ文字、改行は１つの半角スペースとなる行は折り返しされない（例）white-space:normal;
nowrap	連続した半角スペース、タブ文字、改行は１つの半角スペースとなる行は折り返しされる（例）white-space:nowrap;
pre-line	連続した半角スペース、タブ文字は１つの半角スペースとなる改行は反映される行は折り返しされる（例）white-space:pre-line;
pre	連続した半角スペース、タブ、改行はそのまま反映される行は折り返しされない（例）white-space:pre;
pre-wrap	連続した半角スペース、タブ、改行はそのまま反映される行は折り返しされる（例）white-space:pre-wrap;

太字の値は初期値です。


.sample01 {
  white-space:normal;
}


<p class="sample01">This  is
a pen.</p>

This is a pen.

半角スペース２個は半角スペース１つに、改行は無視されます。


.sample01 {
  white-space:pre;
}


<p class="sample01">This  is
a pen.</p>

This is a pen.

半角スペース２個も改行もそのまま表示されます。