英字が指定した範囲で改行されないのを修正する方法として使われるCSSとして以下の2つが使われます。

  1. word-break: break-all;
  2. word-wrap: break-word;

両方とも確かに改行してくれるんですが、どのような違いがあるか実際に表示して確認してみます。

表示の違い
word-break: break-all;
スタイルシートの表示比較テストです。日本語の場合はこのようにボックスの横幅に合わせて改行してくれるので、特にCSSで指定する必要がなく表示も同じものにりますが、ブラウザによっては異なる表示になる場合もあります。次はアルファベット（英文）での表示です。文章は不思議の国のアリスから。

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, ‘and what is the use of a book,’ thought Alice ‘without pictures or conversation?’

word-wrap: break-word;
スタイルシートの表示比較テストです。日本語の場合はこのようにボックスの横幅に合わせて改行してくれるので、特にCSSで指定する必要がなく表示も同じものにりますが、ブラウザによっては異なる表示になる場合もあります。次はアルファベット（英文）での表示です。文章は不思議の国のアリスから。

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, ‘and what is the use of a book,’ thought Alice ‘without pictures or conversation?’

日本語についてはブラウザによっては異なる場合がありますが、基本的にはあまり変わらない表示になります。
英語については、前者のword-break: break-all;は単語の切れ目やスペースなどに関係なく横幅がいっぱいになったら改行されます。

対して後者のword-wrap: break-word;は単語の切れ目で改行されそうなときは横幅いっぱいに達していなくでも改行されます（単語の途中で切れるような表示になりません）。

使い分けについて
通常の英文文章であれば単語が途中で途切れるのはよろしくないのでword-wrap: break-word;を使う事になります。

word-break: break-all;を使う場面として思いつくのはURLなどの文章でない文字列などです。

用途に合わせて使い分けて下さい。

その他の値について
word-wrap
  • normal（デフォルト）
  • break-word（今回表示テストした値）
word-break
  • normal（デフォルト）
  • break-all（今回表示テストした値）
  • keep-all（日本語の改行も行わないようになります）
  • inherit（親要素を継承します、親も指定してない場合はnormalと同じ）