解 説
htmlコーディングでは、英語などの文章は日本語と異なり、ブロック内で自動改行されずはみ出してしまう事があります。これを回避して自動改行でブロック内に収める方法をご紹介します。
1そもそも英語の文章がブロックからはみ出してしまう原因とは？
①日本語あいうえおかきくけこさしすせそたちつてと②英語 ※単語ごとにスペースありone two three four five six seven eight nine ten③英語 ※スペース無し（ブロックからはみ出します）http://agweoghapoweighapwiehgaowihegpawghapwiehgpaowhega
2CSSの記述：word-break:break-allで自動折り返しを指定できます。
.box_test3 {
word-break:break-all;
}
//こちらでも対処可能です
.box_test3 {
word-wrap:break-all;
}
word-breakプロパティに break-all を指定することで強制的に改行させることができます。 word-wrapでも同じように改行できますが、文字の改行点が微妙に違うので、しっくりくる方を選択して使用しても良いでしょう。「br」タグで無理やり改行指定をすると、htmlの文字列として不自然になりますし、デバイスによってレイアウトが崩れる懸念がありますので気をつけましょう。
ボックスから文字がはみ出してしまう主な理由は、英文の場合に単語と単語の間のスペースが空いていない場合に起こります。 具体的には 長い URL や メールアドレス などで頻繁におきる現象です。コード例では、①②はブロック内に収まりますが、③の場合には、ブロックからはみ出してしまいます。