CSS - white-space - とほほのWWW入門

属性名	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

<h5>normal</h5>
<div class="box sample-normal">
This   is   short   sentence.
This   is   very   very   very   very   very   long   sentence.
</div>
<h5>pre</h5>
<div class="box sample-pre">
This   is   short   sentence.
This   is   very   very   very   very   very   long   sentence.
</div>
<h5>nowrap</h5>
<div class="box sample-nowrap">
This   is   short   sentence.
This   is   very   very   very   very   very   long   sentence.
</div>
<h5>pre-wrap</h5>
<div class="box sample-pre-wrap">
This   is   short   sentence.
This   is   very   very   very   very   very   long   sentence.
</div>
<h5>pre-line</h5>
<div class="box sample-pre-line">
This   is   short   sentence.
This   is   very   very   very   very   very   long   sentence.
</div>

表示