CSS white-space ホワイトスペースの表示を指定

CSSのwhite-spaceプロパティで、ホワイトスペースの表示方法を指定するサンプルです。

仕様	white-spaceプロパティの仕様
	white-spaceのサンプル

white-spaceプロパティの仕様

white-space : 値

white-spaceプロパティは、ホワイトスペースの表示方法を指定します。

値	説明
normal	空白が1つにまとまります。折り返されます。(初期値)
nowrap	空白が1つにまとまります。折り返されません。
pre	空白はまとまりません。折り返されません。
pre-wrap	空白はまとまりません。折り返されます。
pre-line	空白はまとまりません。折り返されます。
break-spaces	空白はまとまりません。折り返されます。
値を継承する

以下はMDNのwhite-spaceプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/white-space

ホワイトスペースとは

空間をあらわす文字でHTMLでは空白やタブなどがあります。

以下はMDNのホワイトスペースのリンクです。
https://developer.mozilla.org/ja/docs/Glossary/whitespace

white-spaceのサンプル

white-spaceのサンプルです。

<style>
#p1 {white-space: normal;}
#p2 {white-space: nowrap;}
#p3 {white-space: pre;}
#p4 {white-space: pre-wrap;}
#p5 {white-space: pre-line;}
#p6 {white-space: break-spaces;}
p{border:1px solid #000;width:150px;height:50px;
margin-bottom:10px;background:LightCyan;}
</style>

<p id="p1">あい     うえおかきくnormal</p>
<p id="p2">あい     うえおかきくnowrap</p>
<p id="p3">あい     うえおかきくpre</p>
<p id="p4">あい     うえおかきくpre-wrap</p>
<p id="p5">あい     うえおかきくpre-line</p>
<p id="p6">あい     うえおかきくbreak-spaces</p>

2行目は、normalです。空白が1つにまとまります。折り返されます。
3行目は、nowrapです。空白が1つにまとまります。折り返されません。
4行目は、preです。空白はまとまりません。折り返されません。
5行目は、pre-wrapです。空白はまとまりません。折り返されます。
6行目は、pre-lineです。空白はまとまりません。折り返されます。
7行目は、break-spacesです。空白はまとまりません。折り返されます。

以下は、実行結果です。