7. html - css - white-space 空白・改行の表示

 
7.1 概要
7.2 実験

7.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日時点で、ほとんどのブラウザの最新のバージョンは対応しているようです。

7.2 実験

 これ、いずれの行も「あわわわわ」「まわわわわ」の1文字前に半角スペースをいれ、「あわわわわ」の後ろに改行をいれています。

 white-space: normal;(改行も空白も詰められて、右端があふれたら折り返す)

 あわわわわ
 まわわわわ


 white-space: nowrap;(改行も空白も詰められて、右端があふれても折り返さない)

 あわわわわ
 まわわわわ


 white-space: pre;(改行で改行、空白は文字数分空けて、右端があふれても折り返さない)

 あわわわわ
 まわわわわ


 white-space: pre-wrap;(改行で改行、空白は文字数分空けて、右端があふれたら折り返す)

 あわわわわ
 まわわわわ


 white-space: pre-line;(改行で改行、空白は詰める、右端があふれたら折り返す)

 あわわわわ
 まわわわわ