テキストが要素を突き抜けていく原因と解決法

こんにちは、ゆんつです。

先日、以下のような事態に遭遇しました。

ブロック要素の中に日本語で文字をズラッと入れていくと、何もしなくても要素の端で折り返されて、ブロック要素内に表示されます。

See the Pen
orikaesi by konpure (@yuntu)
on CodePen.

ところが、半角英語にすると折り返されずにブロック要素を突き抜けていきます。

See the Pen
tukinuke by konpure (@yuntu)
on CodePen.

ゆんつ

何でだろ？

原因

半角英数字で区切りのスペースを入れずに繋げて書いたテキストが要素の幅を超える場合に、テキストが要素を突き抜ける現象が起こります。

ゆんつ

そうなんだ

幅の狭い要素に長いURLやメールアドレスを記載する場合などに起こりやすいです。

解決策

テキストが要素を突き抜けないためには、いくつかの解決策があります。

半角スペースを入れる

半角英数字のテキストに適当に半角スペースを入れると、要素の端にさしかかった時に、その半角スペースを目安にテキストが適宜折り返されるようになります。

See the Pen
space by konpure (@yuntu)
on CodePen.

CSSでoverflow-wrapを設定する

単語の途中で改行するかどうかを設定する「overflow-wrap」プロパティを使う方法です。

overflow-wrapは初期値では「単語間の空白などで改行する」という「normal」に設定されています。

これを、単語の途中だろうが要素の端っこで改行する「break-word」にすることで、テキストが要素を突き抜けることを防ぐことができます。

単語と単語の間を半角スペースで区切っている場合

単語が要素の端に差し掛かり単語の途中で折り返されそうな場合、その単語の手前で改行し要素の端にかかりそうだった単語は改行された位置から開始します。

See the Pen
overflow-wrap01 by konpure (@yuntu)
on CodePen.

ゆんつ

半角スペースと同じ効果なので、テキストに半角スペースを入れているなら別に設定しなくてもいいですね

単語と単語の間を半角スペースで区切っていない場合

単純にテキストが要素の端に到達したら折り返されます。

See the Pen
break-word2 by konpure (@yuntu)
on CodePen.

CSSでword-breakを設定する

word-breakは、改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定するプロパティです。

初期値は単語の途中では改行されない「normal」です。

これを、要素のサイズに応じて改行される「break-all」に設定することにより、単語を半角スペースで区切っていてもいなくても、テキストが要素の端まできたら問答無用で折り返されるようになります。

See the Pen
word-break by konpure (@yuntu)
on CodePen.

半角スペースで区切らない場合はどちらでも挙動は変わらない

「overflow-wrap: break-word」も「word-break: break-all」も単語の区切りとなる半角スペースがない場合は挙動は変わらず、テキストが要素の端に到達したら単語の途中であっても折り返しています。

ですので、半角英数字のテキストを半角スペースで区切らない場合（URLやメールアドレスなど）はどっちでも好きな方を使えばいいですね。

使い分けるのは「半角スペースで単語ごとに区切られている英文について、単語の途中で折り返されてもいいので要素の端までびっしり文字を入れたい」という時にword-break: break-allを使うくらいでしょうか。

まとめ

今回は半角英語が要素を突き抜けてしまう現象の原因と、その解決法について見てきました。

簡単にまとめると

という感じです。

状況に応じて適切に使い分けると良いでしょう。

それでは、またー。