現在、この2つの違いは何なのかと思っています。私が両方を使用したとき、それがコンテナーに適合しない場合、それらは言葉を壊すようです。しかし、なぜW3Cはそれを行うために2つの方法を作ったのですか？

これらについての交渉があることW3仕様することを示唆しているように見えるword-break: break-allのに対し、CJK（中国語、日本語、韓国語）のテキストで特定の動作を必要とするためであるword-wrap: break-wordより一般的な、非CJK-意識し、行動です。

word-wrap: break-word 最近に変わった overflow-wrap: break-word

• 長い単語を次の行に折り返します。
• 途中で改行しないように異なる単語を調整します。

word-break: break-all

• 連続する単語であるか多数の単語であるかに関係なく、幅制限の端でそれらを分割します。（つまり、同じ単語の文字内でも）

したがって、コンテンツを動的に取得する固定サイズのスパンが多数ある場合は、を使用することをお勧めします。これword-wrap: break-wordにより、連続する単語のみがその間に分割され、多くの単語で構成される文の場合、スペースはそのままの単語を取得するように調整されます。 （単語内の区切りなし）。

そして、それが問題ではない場合は、どちらかを選択してください。

を使用するword-breakと、非常に長い単語は、開始すべきポイントから始まり、必要なだけ壊れます。

[X] I am a text that 0123
4567890123456789012345678
90123456789 want to live 
inside this narrow paragr
aph.

ただし、を使用するword-wrapと、非常に長い単語は、開始する必要がある時点から開始されません。次の行に折り返され、必要に応じて分割されます

[X] I am a text that 
012345678901234567890123
4567890123456789 want to
live inside this narrow 
paragraph.

word-wrapoverflow-wrapおそらくこの混乱を避けるために名前が変更されました。

これが私たちが持っているものです：

オーバーフローラップ

オーバーフローラッププロパティは、ブラウザがそうでなければ割れない文字列が入っている箱に収まるように長すぎる場合、オーバーフローを防止するために、言葉の中の線を破ることかどうかを指定するために使用されます。

可能な値：

• normal：通常のワードブレークポイントでのみ改行できることを示します。

• break-word：行に他の許容できるブレークポイントがない場合、通常はブレークできない単語が任意のポイントでブレークされる可能性があることを示します。

ソース。

改行

ワードブレイク CSSプロパティは言葉内の行を分割するかどうかを指定するために使用されます。

• normal：デフォルトの改行ルールを使用します。
• break-all：非CJK（中国語/日本語/韓国語）テキストの任意の文字の間に単語の区切りを挿入できます。
• keep-all：CJKテキストの改行を許可しません。CJK以外のテキストの動作は、通常の場合と同じです。

ソース。

ここであなたの質問に戻ります。オーバーフローラップとワードブレークの主な違いは、最初はオーバーフロー状況での動作を決定し、後者は通常の状況（オーバーフローなし）での動作を決定することです。オーバーフローコンテナはテキストを保持するのに十分なスペースを持っていないときの状況が起こります。この状況で行を分割してもスペースがないため、役に立ちません（幅と高さが固定されたボックスを想像してください）。

そう：

• overflow-wrap: break-word：オーバーフローの状況では、単語を分割します。
• word-break: break-all：通常の状況では、行末で単語を改行するだけです。オーバーフローは必要ありません。

table要素内のコンテンツに適用される場合、少なくともFirefox（v24以降）およびChrome（v30以降）では：

word-wrap:break-word

実際には長い単語が折り返されることはなく、テーブルがコンテナの境界を超える可能性があります。

word-break:break-all

う言葉のラッピング、およびそのコンテナ内フィッティング表につながります。

jsfiddleデモ。

これは私が見つけることができるすべてです。それが役立つかどうかはわかりませんが、ミックスに追加すると思いました。

ワードラップ

このプロパティは、コンテンツが要素の指定されたレンダリングボックスの境界を超えた場合に、現在のレンダリングされた行を分割するかどうかを指定します（これは、意図的に 'clip'および 'overflow'プロパティに似ています）。要素が視覚的なレンダリングを持っている場合、明示的な高さ/幅を持つインライン要素である場合、絶対に配置されている場合、および/またはブロック要素である場合。

ワードブレイク

このプロパティは、単語内の改行動作を制御します。要素内で複数の言語が使用されている場合に特に役立ちます。

大きな違いがあります。break-all基本的に、読み取り可能なテキストのレンダリングには使用できません。

文字列This is a text from an old magazineが1行あたり6文字しか収まらないコンテナにあるとします。

word-break: break-all

This i
s a te
xt fro
m an o
ld mag
azine

ご覧のとおり、結果はひどいです。break-all各行にできるだけ多くの文字を収めようとします。「is」のような2文字の単語を2行に分割することもできます。バカバカしい。これが、break-allめったに使用されない理由 です。

word-wrap: break-word

This
is a
text
from
an old
magazi
ne

break-wordコンテナに収まりきらない長さの単語のみを破壊します（8文字の「雑誌」のように、コンテナは6文字に収まります）。コンテナ全体に当てはまる可能性のある単語を壊すことはなく、代わりに新しい行に移動します。

<div style="width: 100px; border: solid 1px black; font-family: monospace;">
  <h1 style="word-break: break-all;">This is a text from an old magazine</h1>
  <hr>
  <h1 style="word-wrap: break-word;">This is a text from an old magazine</h1>
</div

word-break:break-all ：

ボーダーに続いて改行で中断する単語。

word-wrap:break-word ：

最初は、改行で単語を折り返し、次に境界線を続けます。

例：

div {
   border: 1px solid red;
   width: 200px;
}

span {
  background-color: yellow;
}

.break-all {
  word-break:break-all;
 }
.break-word {
  word-wrap:break-word;  
}

<b>word-break:break-all</b>

<div class="break-all">
  This text is styled with
  <span>soooooooooooooooooooooooooome</span> of the text
  formatting properties.
</div>

<b> word-wrap:break-word</b>

<div class="break-word">
  This text is styled with
  <span>soooooooooooooooooooooooooome</span> of the text
  formatting properties.
</div>

それぞれのW3仕様（コンテキストがないためにかなり不明確になっている）から、次のことを推測できます。

• word-break: break-all CJK（中国語、日本語、または韓国語）文字の文章で、CJK以外の外国語（たとえば、西洋）の単語を分割するためのものです。
• word-wrap: break-word 混合ではない（西洋語のみとしましょう）言語での単語分割用です。

少なくとも、これらはW3の意図でした。実際に起こったのは、結果としてブラウザの非互換性を伴う大きな問題でした。これは、関連するさまざまな問題の優れた記事です。

次のコードスニペットは、クロスブラウザー環境でCSSを使用してワードラップを実現する方法の概要として役立ちます。

-ms-word-break: break-all;
 word-break: break-all;

 /* Non standard for webkit */
 word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;

以前のコメントに加えて、のブラウザサポートはのword-wrapものよりも少し良いようですword-break。