CSS - white-space

概要

属性名 white-space
normal | pre | pre-wrap | pre-line |
[<white-space-collapse> || <text-wrap-mode> || <white-space-trim>]
初期値normal
適用可能要素すべての要素
継承継承する
サポートhttps://caniuse.com/?search=white-space

説明

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

normal
自動改行します。連続する空白・タブ・改行を1つの半角スペースに変換します。下記の指定と同様となります。
  white-space-collapse: collapse;
  text-wrap-mode: wrap;
  white-space-trim: none;
pre
自動改行しません。空白・タブ・改行はそのまま表示します。下記の指定と同様となります。
  white-space-collapse: preserve;
  text-wrap-mode: nowrap;
  white-space-trim: none;
pre-wrap
自動改行します。空白・タブ・改行はそのまま表示します。下記の指定と同様となります。
  white-space-collapse: preserve;
  text-wrap-mode: wrap;
  white-space-trim: none;
pre-line
自動改行します。連続する空白・タブをひとつの半角スペースに置換します。下記の指定と同様となります。
  white-space-collapse: preserve-breaks;
  text-wrap-mode: wrap;
  white-space-trim: none;
<white-space-collapse>
<white-space-collapse> を参照してください。
<text-wrap-mode>
<text-wrap-mode> を参照してください。
<white-space-trim>
<white-space-trim> を参照してください。

使用例

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.

関連項目

リンク