CSS - white-space

概要

属性名 white-space
値 normal | pre | nowrap | pre-wrap | pre-line
初期値各要素によって異なる
適用可能要素すべての要素
継承継承する
サポートhttps://caniuse.com/?search=white-space

説明

要素の中のテキストを、自動改行するか、複数の空白をひとつの空白に置換するか、改行を空白に置換するかを指定します。

値説明
normal自動改行します。複数の空白・タブ・改行をひとつの空白に置換します。
pre自動改行しません。空白・タブ・改行はそのまま表示します。
nowrap自動改行しません。複数の空白・タブ・改行をひとつの空白に置換します。
pre-wrap自動改行します。空白・タブ・改行はそのまま表示します。
pre-line自動改行します。複数の空白・タブをひとつの空白に置換します。ただし改行はそのまま表示します。

使用例

CSS
.box {
  width: 20rem;
  margin-bottom: .5rem;
  border: 1px solid #999;
}
.sample-normal {
  white-space: normal;
}
.sample-pre {
  white-space: pre;
}
.sample-nowrap {
  white-space: nowrap;
}
.sample-pre-wrap {
  white-space: pre-wrap;
}
.sample-pre-line {
  white-space: pre-line;
}
HTML
<h3>normal</h3>
<div class="box sample-normal">
This   is   short   sentence.
This   is   very   very   very   very   very   long   sentence.
</div>
<h3>pre</h3>
<div class="box sample-pre">
This   is   short   sentence.
This   is   very   very   very   very   very   long   sentence.
</div>
<h3>nowrap</h3>
<div class="box sample-nowrap">
This   is   short   sentence.
This   is   very   very   very   very   very   long   sentence.
</div>
<h3>pre-wrap</h3>
<div class="box sample-pre-wrap">
This   is   short   sentence.
This   is   very   very   very   very   very   long   sentence.
</div>
<h3>pre-line</h3>
<div class="box sample-pre-line">
This   is   short   sentence.
This   is   very   very   very   very   very   long   sentence.
</div>
表示
normal
This is short sentence. This is very very very very very long sentence.
pre
This is short sentence. This is very very very very very long sentence.
nowrap
This is short sentence. This is very very very very very long sentence.
pre-wrap
This is short sentence. This is very very very very very long sentence.
pre-line
This is short sentence. This is very very very very very long sentence.

リンク

Copyright (C) 1997-2012 杜甫々
初版：1997年7月27日、最終更新：2012年5月4日
https://www.tohoho-web.com/css/prop/white-space.htm