CSSで空白文字や改行をコントロールしたいと思い、
MDNを調べました。
すると、white-spaceとoverflowというプロパティがありました。
しかし、これらのプロパティの役割が少しややこしく、混同してしまいそうだったので、
それぞれのプロパティの持つ意味を記録として書き残しておきます。
white-space
CSSでは、white-spaceプロパティにより、
HTMLソースコードに含まれる
Spaces (U+0020), tabs (U+0009)
という空白文字と
改行文字とをどう扱うかを設定できるとのこと。
https://developer.mozilla.org/ja/docs/Web/CSS/white-space
種類は、以下のとおりです。
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;
preというのはpreservedもしくはpreserveの略だと思われます。
空白文字や改行文字をそのまま保持(preserve)して表示します。
ただし、pre-lineでは、改行文字のみ保持され、連続する空白文字は消去されてしまいます。
wrapというのは、限られた幅の中で文字列を折り返してうまくその中に包み込むことを意味します。
wrapにより、文字列を限られた幅の中に、はみ出させずに収めることができます。
ただし、長い単語の途中に分割を入れることはできないので、
単語が長すぎるとはみ出します。
nowrap、preでは、wrapしないので、文字列ははみ出します。
長い単語を分割したい場合は、overflow-wrapプロパティの方で単語の分割設定をします。
overflow-wrap
overflow-wrapプロパティでは、長すぎる単語をどう分割するかを設定できます。
https://developer.mozilla.org/ja/docs/Web/CSS/overflow
種類は、以下のとおりです。
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;
anywhere、break-wordはともに、単語が長すぎる場合に容赦なく単語のどこででも分割を行います。
ただし、anywhereでは分割後の状態で領域の幅に余りがあればその余分な幅を縮小させますが、
break-wordでは分割前の状態の幅から収縮させることはしません。
