HTML - CSS - white-space 空白・改行の表示
- 1. 概要
- 2. 実験
1. 概要
いわゆるホワイトスペース（スペース、タブ、改行）文字をどう表示させるかを定義します。
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
| 値 | 改行 | 空白・タブ | 右端があふれた場合 |
|---|
| normal | 詰める | 詰める | 折り返す |
| nowrap | 詰める | 詰める | 折り返さない |
| pre | 空ける | 空ける | 折り返さない |
| pre-wrap | 空ける | 空ける | 折り返す |
| pre-line | 空ける | 詰める | 折り返す |
これに、ベンダプレフィックスがたくさんあってややこしかったのですが。
2018年3月5日時点で、ほとんどのブラウザの最新のバージョンは対応しているようです。
2. 実験
これ、いずれの行も「あわわわわ」「まわわわわ」の１文字前に半角スペースをいれ、「あわわわわ」の後ろに改行をいれています。
white-space: normal;（改行も空白も詰められて、右端があふれたら折り返す）
white-space: nowrap;（改行も空白も詰められて、右端があふれても折り返さない）
white-space: pre;（改行で改行、空白は文字数分空けて、右端があふれても折り返さない）
white-space: pre-wrap;（改行で改行、空白は文字数分空けて、右端があふれたら折り返す）
white-space: pre-line;（改行で改行、空白は詰める、右端があふれたら折り返す）
|
|
