スペース/タブ/改行の制御

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

空白文字の制御

white-space

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

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

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

折り返しの制御

デフォルトですと、ボックスから文字がはみ出てしまいます。
はみでないようするには、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

overflow-wrapとword-warp
CSS3の仕様案で word-wrap から overflow-wrap へ改称されました。ただ、IEなどでは、word-wrap のみ対応しています。
わくわくBank.
フリーランスのエンジニアとして活動してます。ここでは、ソフトウェア開発で必要とされる技術、用語、概念を整理しています。