CSS - white-space
概要
説明
要素の中のテキストを、自動改行するか、複数の空白をひとつの空白に置換するか、改行を空白に置換するかを指定します。
値 | 説明 |
normal | 自動改行します。複数の空白・タブ・改行をひとつの空白に置換します。 |
pre | 自動改行しません。空白・タブ・改行はそのまま表示します。 |
nowrap | 自動改行しません。複数の空白・タブ・改行をひとつの空白に置換します。 |
pre-wrap | 自動改行します。空白・タブ・改行はそのまま表示します。 |
pre-line | 自動改行します。複数の空白・タブをひとつの空白に置換します。ただし改行はそのまま表示します。 |
使用例
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.
リンク
Copyright (C) 1997-2012 杜甫々
初版:1997年7月27日、最終更新:2012年5月4日
https://www.tohoho-web.com/css/prop/white-space.htm