【CSS】white-space - ホワイトスペースの振る舞い
CSSのwhite-spaceプロパティについてご紹介します。
white-space
white-spaceはスペースの振る舞いを示すプロパティです。
基本構文
white-space: 値;値
一般的な値は次の通りです。
| 値 | 連続スペース | 改行 |
|---|---|---|
| normal | 詰める | 自動 |
| nowrap | 詰める | なし |
| pre | そのまま | 改行文字 |
| pre-wrap | そのまま | 改行文字 / 自動 |
| pre-line | 詰める | 改行文字 / 自動 |
サンプル
normal
<style>
p {
white-space: normal;
}
</style>
<p>ABC DEF
GHI ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO</p>nowrap
<style>
p {
white-space: nowrap;
}
</style>
<p>ABC DEF
GHI ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO</p>pre
<style>
p {
white-space: pre;
}
</style>
<p>ABC DEF
GHI ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO</p>pre-wrap
<style>
p {
white-space: pre-wrap;
}
</style>
<p>ABC DEF
GHI ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO</p>pre-line
<style>
p {
white-space: pre-line;
}
</style>
<p>ABC DEF
GHI ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO ABCDEFGHIJKLMNO</p>
