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

CSSのwhite-spaceのサンプルです。

サンプル	white-spaceプロパティ
	空白がまとまる＋折り返される (normal)
	空白がまとまる＋折り返されない (nowrap)
	空白がまとまらない＋折り返されない (pre)
	空白がまとまらない＋折り返される (pre-wrap)
	空白がまとまる＋折り返される (pre-line)
	空白がまとまらない＋折り返される (break-spaces)

white-spaceプロパティ

white-space : 値

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

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

※ ホワイトスペースとは

空間をあらわす文字でHTMLでは空白やタブなどがあります。
以下はMDNのホワイトスペースのリンクです。
https://developer.mozilla.org/ja/docs/Glossary/whitespace

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

空白がまとまる＋折り返される (normal)

<style>
  .p1 {
    border: 1px solid #000;
    width: 150px;
    height: 50px;
    background: LightCyan;
    white-space: normal;
  }
</style>
<p class="p1">あい     うえおかきくabcdefghijk</p>

normalは、複数の空白が1つになります。折り返されます。

空白がまとまる＋折り返されない (nowrap)

<style>
  .p1 {
    border: 1px solid #000;
    width: 150px;
    height: 50px;
    background: LightCyan;
    white-space: nowrap;
  }
</style>
<p class="p1">あい     うえおかきくabcdefghijk</p>

nowrapは、複数の空白が1つになります。折り返されません。

空白がまとまらない＋折り返されない (pre)

<style>
  .p1 {
    border: 1px solid #000;
    width: 150px;
    height: 50px;
    background: LightCyan;
    white-space: pre;
  }
</style>
<p class="p1">あい     うえおかきくabcdefghijk</p>

preは、空白はまとまりません。折り返されません。

空白がまとまらない＋折り返される (pre-wrap)

<style>
  .p1 {
    border: 1px solid #000;
    width: 150px;
    height: 50px;
    background: LightCyan;
    white-space: pre-wrap;
  }
</style>
<p class="p1">あい     うえおかきくabcdefghijk</p>

pre-wrapは、空白はまとまりません。折り返されます。

空白がまとまる＋折り返される (pre-line)

<style>
  .p1 {
    border: 1px solid #000;
    width: 150px;
    height: 50px;
    background: LightCyan;
    white-space: pre-line;
  }
</style>
<p class="p1">あい     うえおかきくabcdefghijk</p>

pre-lineは、空白はまとまります。折り返されます。

空白がまとまらない＋折り返される (break-spaces)

<style>
  .p1 {
    border: 1px solid #000;
    width: 150px;
    height: 50px;
    background: LightCyan;
    white-space: break-spaces;
  }
</style>
<p class="p1">あい     うえおかきくabcdefghijk</p>

break-spacesは、空白はまとまりません。折り返されます。