CSSの "Word-break：break-all"と "Word-wrap：break-Word"の違いは何ですか
私は現在両者の違いは何だろうかと思っています。私が両方を使用したとき、それはコンテナに合わないなら彼らはみことばを壊すようです。しかし、なぜ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を使用すると、非常に長いWordが開始位置から開始され、必要に応じて破損しています。
[X] I am a text that 0123
4567890123456789012345678
90123456789 want to live
inside this narrow paragr
aph.
ただし、Word-wrapを使用すると、非常に長いWordは開始されるべき時点で開始されません。それは次の行に折り返され、それから必要な限り壊されます
[X] I am a text that
012345678901234567890123
4567890123456789 want to
live inside this narrow
paragraph.
table要素のコンテンツに適用する場合、少なくともFirefox（v24以降）およびChrome（v30以降）では、次のようになります。
Word-wrap:break-Word
実際にはロングワードを折り返しません。その結果、テーブルがコンテナの境界を超えることがあります。
Word-break:break-all
は単語を折り返し、テーブルはそのコンテナ内に収まるようにします。
Word-wrapはおそらくこの混乱を避けるためにoverflow-wrapに改名されました。
今、これは私たちが持っているものです：
オーバーフローラップ
overflow-wrapプロパティは、それ以外の場合は改行不可能な文字列が長すぎてその格納ボックスに収まらない場合にオーバーフローを防ぐために、ブラウザが単語内の行を改行できるかどうかを指定するために使用します。
可能な値：
normal：行は通常のWordブレークポイントでのみ改行することを示します。
break-Word：行内に別の意味で利用可能なブレークポイントがない場合、通常はブレーク不可能な単語が任意のポイントで分割される可能性があることを示します。
ソース 。
ワードブレイク
Word-break CSSプロパティは、単語内で改行するかどうかを指定するために使用されます。
- normal：デフォルトの改行規則を使用します。
- break-all：CJK（中国語/日本語/韓国語）以外のテキストでは、任意の文字の間に改行を挿入することができます。
- keep-all：CJKテキストにWordの改行を許可しません。 CJK以外のテキストの動作は通常と同じです。
ソース 。
さて、あなたの質問に戻りますが、overflow-wrapとWord-breakの主な違いは、最初のものがオーバーフローに対する振る舞いを決定するということです。一方、後者は通常の状況（オーバーフローなし）での動作を決定します。 オーバーフローの状況は、コンテナにテキストを格納するのに十分なスペースがない場合に発生します。このような状況では、スペースがないので分割できません（幅と高さが固定されたボックスを想像してください）。
そう：
overflow-wrap: break-Word：オーバーフローが発生した場合は、単語を分割してください。Word-break: break-all：通常の状況では、単に行の終わりで単語を分割してください。オーバーフローは必要ありません。
これは私が見つけることができるすべてです。それが役立つかどうかわからないが、私はミックスにそれを追加すると思いました。
Word-WRAP
このプロパティは、コンテンツが要素に対して指定されたレンダリングボックスの境界を超えた場合に現在のレンダリングされた行を分割するかどうかを指定します（これは、意図的な 'clip'および 'overflow'プロパティと似ています）要素が視覚的なレンダリングを持つ場合、明示的な高さ/幅を持つインライン要素であるか、絶対位置にあるか、および/またはブロック要素です。
Word-BREAK
このプロパティは、単語内の改行動作を制御します。要素内で複数の言語が使用されている場合に特に便利です。
Word-break:break-all：
国境を越えて改行で改行する単語。
Word-wrap:break-Word：
最初に、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は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;
巨大の違いがあります。 break-allは基本的に、読みやすいテキスト（西部アルファベット付き）のレンダリングには使用できません。
行ごとに6文字しか収まらないコンテナに文字列This is a text from an old magazineがあるとしましょう。
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文字である「magazine」や、コンテナは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-wrap のブラウザサポートは Word-break よりも少し優れているようです。