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

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

この前こんな事態に遭遇しました。

ブロック要素の中に日本語で文字をズラッと入れていくと

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

何もしなくても要素の端で折り返されて、ブロック要素内に表示されます。

ところが半角英語にすると折り返されずに

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

ブロック要素を突き抜けていきます。

ゆんつ

何で？

原因

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

ゆんつ

そうなんだ

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

解決策

半角スペースを入れる

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

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

CSSでword-wrap: break-wordを設定する

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

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

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

ゆんつ

半角スペースと同じ効果なので、

半角スペースを入れているなら

別に設定しなくてもいいですね。

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

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

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

CSSでword-break: break-allを設定する

単語を半角スペースで区切っていてもいなくても、テキストが要素の端まできたら問答無用で折り返します。

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

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

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

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

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

まとめ

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

簡単にまとめると

という感じです。

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

それでは、またー。