CSS - white-space

• トップ
• CSSリファレンス
• 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> を参照してください。

使用例

.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;
}

<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>

関連項目

• white-space-collapse
• white-space-trim
• text-wrap
• text-wrap-mode
• text-wrap-style

リンク

• https://drafts.csswg.org/css-text-4/#white-space-property
• https://developer.mozilla.org/ja/docs/Web/CSS/white-space
• https://caniuse.com/?search=white-space