CSS white-space 改行するしない/空白まとめる

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

目次 white-spaceとは
normal / nowrap / pre
pre-wrap / pre-line / break-spaces

white-spaceとは

書き方 white-space : 値
normal・・・空白がまとまる。改行される。
nowrap・・・空白がまとまる。改行されない。
pre・・・空白はまとまらない。改行されない。
pre-wrap・・・空白はまとまらない。改行される。
pre-line・・・空白はまとまる。改行される。
break-spaces・・・空白はまとまらない。改行される。
備考 ホワイトスペースとは
空間をあらわす文字でHTMLでは空白やタブなどがあります。
https://developer.mozilla.org/ja/docs/Glossary/whitespace
初期値 normal
継承 継承する
参考(MDN) 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)

white-space: nowrapは、ブロックレベル要素であるpタグやdivタグで改行されません。

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

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は、空白はまとまりません。折り返されます。

関連の記事

[CSS] overflow-wrap/word-wrap 単語が表示域超過
CSS overflow はみ出し部分を表示する/しない
[CSS] word-break 単語の改行方法を指定

△上に戻る