white-spaceプロパティ
white-space : 値 |
white-spaceプロパティは、ホワイトスペースの表示方法を指定します。
値 | 説明 |
---|---|
normal | 空白がまとまる。折り返される。(初期値) |
nowrap | 空白がまとまる。折り返されない。 |
pre | 空白はまとまらない。折り返されない。 |
pre-wrap | 空白はまとまらない。折り返される。 |
pre-line | 空白はまとまる。折り返される。 |
break-spaces | 空白はまとまらない。折り返される。 |
値を継承する |
以下はMDNのwhite-spaceプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/white-space
ホワイトスペースとは
空間をあらわす文字でHTMLでは空白やタブなどがあります。
以下はMDNのホワイトスペースのリンクです。
https://developer.mozilla.org/ja/docs/Glossary/whitespace
ホワイトスペースの表示方法のサンプルです。
空白がまとまる+折り返される (normal)
<style>
#p1 {
border: 1px solid #000;
width: 150px;
height: 50px;
background: LightCyan;
white-space: normal;
}
</style>
<p id="p1">あい うえおかきくabcdefghijk</p>
normalは、複数の空白が1つになります。折り返されます。
空白がまとまる+折り返されない (nowrap)
<style>
#p1 {
border: 1px solid #000;
width: 150px;
height: 50px;
background: LightCyan;
white-space: nowrap;
}
</style>
<p id="p1">あい うえおかきくabcdefghijk</p>
nowrapは、複数の空白が1つになります。折り返されません。
空白がまとまらない+折り返されない (pre)
<style>
#p1 {
border: 1px solid #000;
width: 150px;
height: 50px;
background: LightCyan;
white-space: pre;
}
</style>
<p id="p1">あい うえおかきくabcdefghijk</p>
preは、空白はまとまりません。折り返されません。
空白がまとまらない+折り返される (pre-wrap)
<style>
#p1 {
border: 1px solid #000;
width: 150px;
height: 50px;
background: LightCyan;
white-space: pre-wrap;
}
</style>
<p id="p1">あい うえおかきくabcdefghijk</p>
pre-wrapは、空白はまとまりません。折り返されます。
空白がまとまる+折り返される (pre-line)
<style>
#p1 {
border: 1px solid #000;
width: 150px;
height: 50px;
background: LightCyan;
white-space: pre-line;
}
</style>
<p id="p1">あい うえおかきくabcdefghijk</p>
pre-lineは、空白はまとまります。折り返されます。
空白がまとまらない+折り返される (break-spaces)
<style>
#p1 {
border: 1px solid #000;
width: 150px;
height: 50px;
background: LightCyan;
white-space: break-spaces;
}
</style>
<p id="p1">あい うえおかきくabcdefghijk</p>
break-spacesは、空白はまとまりません。折り返されます。
関連の記事
CSS overflow-wrap 単語が表示域を超える時の改行
CSS overflow はみ出た部分を表示する/しない
CSS word-break 単語の改行方法を指定