CSSのwhite-spaceプロパティの挙動の覚え方
なぜこの記事を書いた？
"white-space"というプロパティ名からどのような働きがあるのか想像しにくく、また各値を指定したときの挙動も値名から連想しにくかったので覚え方を考えました。 個別に挙動を覚えるのは大変に感じたのでnormalとpreの挙動だけ覚えて他の値での挙動はそれらからの差分を考えるという方針を取りました。
white-spaceプロパティの各値での挙動
はじめに各値とその挙動を列挙しておきます。
| 値名 | 改行などの反映 | 行の折り返し |
|---|---|---|
| normal 初期値 | HTMLコード内で改行（enter）や半角スペース、タブが連続入力されても、ブラウザ表示では1つの空白文字にまとめられる | 自動で折り返し |
| nowrap | 折り返しされない | |
| pre | 連続で入力した空白や改行がブラウザでの表示に反映される | 折り返しされない |
| pre-wrap | 自動で折り返し | |
| pre-line | 連続で並ぶ半角スペースやtabは1つの空白文字にまとまるが、改行（enter）は反映される | 自動で折り返し |
出典：CSSのwhite-spaceの使い方：pre、wrap、nowrapなどの違いは？
覚え方
normal
そのまま覚える。これが他の値の挙動を覚える基準になる。
nowrap
normalから折り返し（wrap）だけを省いた挙動
pre
全ての空白文字がそのまま残される（"pre"served）。 したがって、半角スペース・Tab・改行はHTMLのソースに書いたものがそのまま出力されるため折り返しも行われない。 "pre"は"preserved"の略？
pre-wrap
"pre"での挙動に折り返し（wrap）が加わる。
pre-line
行（line）に対する挙動、つまりHTMLのソースでの改行のみそのまま残される（"pre"served）。 したがって、preでの挙動のうち改行だけが適用されている状態になる。 nomalと比較して改行だけが反映されるというように解釈しても良いかも。
感想
- 覚え方と銘打った割にうまくまとまらなかった
- 初めは値preはHTMLの
<pre>要素型と同じく"preformatted text"の略称だと思っていたが、"preserved"の略称っぽい？
