スペース/タブ/改行(word-break, overflow-wrap)

white-spaceword-breakoverflow-wrap(word-wrap)を利用すると、スペース/タブ/改行を制御できます。多少ややこしく、デザインが崩れやすい原因の1つです。CODEPENの例とともに動作確認していきます。

空白文字の制御

white-space

white-spaceは、要素内の空白文字（スペース、タブ、改行）を制御します。

設定値	連続する空白とタブ文字	改行	折り返し
normal	1文字にする	詰める	折り返す
nowrap	1文字にする	詰める	折り返さない
pre	そのまま	そのまま	折り返さない
pre-wrap	そのまま	そのまま	折り返す
pre-line	そのまま	詰める	折り返す

See the Pen white-space by waku-waku (@raku-raku) on CodePen.

個人的に、 pre-wrap をよく利用します。

折り返しの制御

See the Pen word-break / word-wrap by waku-waku (@raku-raku) on CodePen.

デフォルトですと、ボックスから文字がはみ出てしまいます。
はみでないようするには、word-break: break-all または、 overflow-wrap: break-word を利用します。

各classごとに設定すると対応漏れが発生しやすいので、 base.css など大元となるCSSで設定してしまうことをお勧めします。

word-break: break-all

ボックスからはみ出る位置で折り返します。
なので、英単語の途中でも折り返されてしまいます。

https://developer.mozilla.org/ja/docs/Web/CSS/word-break

overflow-wrap: break-word

英単語の途中で折り返しません。
ただ、他に改行できるポイントが無い場合には、単語途中でも改行してくれます。

https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap