| 属性名 | white-space-collapse |
|---|---|
| 値 | collapse | discard | preserve | preserve-breaks | preserve-spaces | break-spaces |
| 初期値 | collapse |
| 適用可能要素 | テキスト要素 |
| 継承 | 継承する |
| サポート | https://caniuse.com/?search=white-space-collapse |
テキスト中のホワイトスペース (半角スペース(U+0020)、タブ文字(U+0009)、改行文字(U+000D や U+000A)) をどのように表示するかを指定します。まだ安定していない機能ですので今後仕様が変わる可能性があります。
.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>
行末には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>