CSS - white-space-collapse

• トップ
• CSSリファレンス
• white-space-collapse

概要

説明

テキスト中のホワイトスペース (半角スペース(U+0020)、タブ文字(U+0009)、改行文字(U+000D や U+000A)) をどのように表示するかを指定します。まだ安定していない機能ですので今後仕様が変わる可能性があります。

collapse

1つ以上連続する半角スペース、タブ文字、改行文字を1つの半角スペースに変換した後、行頭と行末の半角スペースを削除します。

preserve

半角スペース、タブ文字、改行文字をそのまま残します。

preserve-breaks

改行文字はそのまま残します。1つ以上連続するホワイトスペースを1つの半角スペースに変換した後、すべての行の行頭と行末の半角スペースを削除します。

preserve-spaces

スペース文字(半角スペースとタブ文字)を残します。1つの改行を1つの半角スペースに変換します。行頭と行末の半角スペースは残します。

break-spaces

preserve とほぼ同等ですが、スペースで改行する点が異なります。preserve は半角スペースやタブ文字が横幅をあふれても改行しませんが、break-spaces は半角スペースやタブ文字が横幅を超えると改行を行います。現時点(2025年1月の Chrome 131 ではまだサポートされていません。Firefox 124 でサポートされています。

discard

半角スペース、タブ文字、改行文字をすべて削除します。現時点(2025年1月)の Chrome 131 や Firefox 134 ではまだサポートされていません。

使用例

collapse, preserver, preserver-breaks, preserve-spaces の差異

.my-example {
  margin-bottom: 1rem;
}
.my-box {
  display: inline-block;
  border: 1px solid #999;
  font-family: Consolas;
}

※各行の先頭と末尾に4文字の半角スペースを入れています。
<div class="my-example">
<h3>collapse</h3>
<div class="my-box" style="white-space-collapse: collapse">
    AAAA    BBBB    CCCC    
    DDDD    EEEE    FFFF    
</div>
</div>
<div class="my-example">
<h3>preserve</h3>
<div class="my-box" style="white-space-collapse: preserve">
    AAAA    BBBB    CCCC    
    DDDD    EEEE    FFFF    
</div>
</div>
<div class="my-example">
<h3>preserve-breaks</h3>
<div class="my-box" style="white-space-collapse: preserve-breaks">
    AAAA    BBBB    CCCC    
    DDDD    EEEE    FFFF    
</div>
</div>
<div class="my-example">
<h3>preserve-spaces</h3>
<div class="my-box" style="white-space-collapse: preserve-spaces">
    AAAA    BBBB    CCCC    
    DDDD    EEEE    FFFF    
</div>
</div>

preserve と break-spaces の差異

行末には4文字の半角スペースを入れています。テキストを選択すると半角スペースの有無が分かります。preserve は半角スペースが横幅をあふれていても改行しませんが、break-spaces は半角スペースがあふれると改行します。

<div class="my-example">
<h3>preserve</h3>
<div class="my-box" style="width: 33ch; white-space-collapse: preserve">
    AAAA    BBBB    CCCCCCCCCCCC    
    DDDD    EEEE    FFFFFFFFFFFF    
</div>
</div>
<div class="my-example">
<h3>break-spaces</h3>
<div class="my-box" style="width: 33ch; white-space-collapse: break-spaces">
    AAAA    BBBB    CCCCCCCCCCCC    
    DDDD    EEEE    FFFFFFFFFFFF    
</div>
</div>

関連項目

• white-space
• text-wrap

リンク

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