属性名 | white-space |
---|---|
値 | normal | pre | pre-wrap | pre-line | [<white-space-collapse> || <text-wrap-mode> || <white-space-trim>] |
初期値 | normal |
適用可能要素 | すべての要素 |
継承 | 継承する |
サポート | https://caniuse.com/?search=white-space |
要素の中のテキストを、自動改行するか、複数の空白をひとつの空白に置換するか、改行を空白に置換するかを指定します。
white-space-collapse: collapse;
text-wrap-mode: wrap;
white-space-trim: none;
white-space-collapse: preserve;
text-wrap-mode: nowrap;
white-space-trim: none;
white-space-collapse: preserve;
text-wrap-mode: wrap;
white-space-trim: none;
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>