CSSで英文字の折り返しが効かない！文字のはみ出しを解決！word-break: break-all;

メールアドレスなどを含む要素が何故か文字がはみ出してしまう現象になってしまったのでメモ。
まず問題はここです。
要素がある位置から明らかに文字がはみ出してしまう状況。
特に厄介なのは、日本語は折り返しが効いている事です。

HTML

<div class="image-left-box">
    <h2>Gmail</h2>
        <p>お問い合わせはこちらのメールアドレスまでお願いします。</p>
	  <mail>〇〇〇@gmail.com</mail>
</div>

CSS

.image-left-box{
    min-width:0;
}

この時、白い枠内を

CSS

display:flex;
justify-content:row;

で指定していたため、min-width:0;を使いましたが、下のメールアドレスだけが適応されませんでした。

折り返しが効かないのは何が原因だったか

英文字は単語ごとに判断されるようで特にメールアドレスはメールアドレス全部で一単語扱いされるため、「min-width:0;」が効かず折り返されなかったようです。

日本語は単語ごとに分けるのが難しいからか、はみ出た分はすぐに折り返されるようですが、英語は単語としての区切りが明確で、単語として文字が続いている限りは折り返されず続いてしまうようです。

折り返しが効かない事に対する解決策

「word-break: break-all;」を入れることで解決出来ました。
これを用いることによって英語も関係なく折り返すことができるようです。

word-break: break-all;とは

word-breakには以下の種類があり、

• word-break: normal;
  改行規則に基づく。
• word-break: break-all;
  禁則処理を無視し、改行を行う。
• word-break: keep-all;
  CJK（China、Japanese、Korean）の改行は許可しない
• word-break: break-word;
  禁則処理は可能な限り保たれるが、IEとEdgeは非対応→非推奨

今回はbreak-allを用い改行を行いました。

まとめ

英文字やメールアドレスを枠内で折り返す際には、「word-break: break-all;」を入れることで解決できます。

CSS

.image-left-box{
	min-width:0;
	word-break:break-all;
}

参考(1)(2)