blocks|key|557946|text|The+W3+specification+that+talks+about+these似乎认为，word-break:+break-all用于要求具有中日韩(中、日、韩)文本的特定行为，而word-wrap:+break-word是更一般的、非中日韩意识的行为。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|557947|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/css3-text/^0|1C|L|2M|L|0|17|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]]|E|$]]|$1|F|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<a href="http://www.w3.org/TR/css3-text/" rel="noreferrer">The W3 specification that talks about these</a> seem to suggest that <code>word-break: break-all</code> is for requiring a particular behaviour with CJK (Chinese, Japanese, and Korean) text, whereas <code>word-wrap: break-word</code> is the more general, non-CJK-aware, behaviour.

blocks|key|1847953|text|word-wrap:+break-word最近更改为overflow-wrap:+break-word|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1847954|1847955|会将较长的单词换行到下一行。|unordered-list-item|1847956|会调整不同的单词，使它们不会在中间中断。|1847957|1847958|word-break:+break-all|1847959|无论是一个连续的单词还是多个单词，|1847960|都会在宽度限制的边缘将它们拆分。(即即使在同一个词的字符内)|1847961|1847962|因此，如果你有许多固定大小的跨度来动态获取内容，你可能更喜欢使用word-wrap:+break-word，因为那样只有连续的单词被打断，如果它是一个包含许多单词的句子，空格被调整以获得完整的单词(单词中没有中断)。|1847963|如果这无关紧要，那就任选一个吧。|1847964|entityMap^0|0|L|Q|P|0|0|0|0|0|0|L|0|0|0|0|W|L|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|14|8|@]|D|@]|E|$]]|$1|G|3|H|5|I|7|15|8|@]|D|@]|E|$]]|$1|J|3|K|5|I|7|16|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|17|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1B|8|@]|D|@]|E|$]]|$1|Q|3|R|5|I|7|1C|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|V|3|W|5|6|7|1H|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|Y|$]]

<code>word-wrap: break-word</code> recently changed to <code>overflow-wrap: break-word</code>

<ul>
<li>will wrap long words onto the next line.</li>
<li>adjusts different words so that they do not break in the middle.</li>
</ul>

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

<ul>
<li>irrespective of whether it’s a continuous word or many words, breaks them up at the edge of the width limit. (i.e. even within the characters of the same word)</li>
</ul>

So if you have many fixed-size spans which get content dynamically, you might just prefer using <code>word-wrap: break-word</code>, as that way only the continuous words are broken in between, and in case it’s a sentence comprising many words, the spaces are adjusted to get intact words (no break within a word).

And if it doesn’t matter, go for either.

blocks|key|1848028|text|在word-break中，一个非常长的单词从它应该开始的地方开始，并根据需要断开它|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1848029|[X]+I+am+a+text+that+0123
4567890123456789012345678
90123456789+want+to+live+
inside+this+narrow+paragr
aph.|code-block|syntax|javascript|1848030|然而，在word-wrap中，一个非常长的单词不会在它应该开始的地方开始。它换行到下一行，然后根据需要换行|1848031|[X]+I+am+a+text+that+
012345678901234567890123
4567890123456789+want+to
live+inside+this+narrow+
paragraph.|1848032|entityMap^0|1|A|0|0|4|9|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

With <code>word-break</code>, a very long word starts at the point it should start 
and it is being broken as long as required

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

However, with <code>word-wrap</code>, a very long word WILL NOT start at the point it should start.
it wrap to next line and then being broken as long as required

<pre><code>[X] I am a text that 
012345678901234567890123
4567890123456789 want to
live inside this narrow 
paragraph.
</code></pre>

blocks|key|1966317|text|word-wrap已被重命名为overflow-wrap，可能是为了避免这种混淆。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1966318|这就是我们所拥有的：|1966319|溢出包装|1966320|1966321|++overflow+-wrap属性用于指定浏览器是否可以在单词内换行，以防止在其他情况下不能中断的字符串太长而无法放入其包含框时溢出。|blockquote|BOLD|1966322|1966323|1966324|可能的值：|1966325|1966326|normal：表示行只能在正常的断字时换行。points.|unordered-list-item|1966327|break-word：表示如果行中没有其他可接受的断点，则通常不能换行的单词可以在任意点处换行。|1966328|1966329|source。|1966330|断字|1966331|1966332|+分词+CSS属性用于指定是否在单词内换行。|1966333|1966334|1966335|1966336|normal：使用默认换行符rule.|1966337|break-all：可以在非中日韩(中文/日语/朝鲜语)的任何字符之间插入分词符text.|1966338|keep-all：不允许中日韩文字使用分词符。非CJK文本行为与正常文本行为相同。|1966339|1966340|1966341|1966342|现在回到您的问题，overflow-wrap和分词之间的主要区别是，前者确定溢出情况下的行为，而后者确定正常情况下(无溢出)的行为。当容器没有足够的空间容纳文本时，就会发生溢出情况。在这种情况下换行没有帮助，因为没有空间(想象一个具有固定宽度和高度的框)。|1966343|所以：|1966344|在溢出情况下|1966345|overflow-wrap:+break-word：，在正常情况下中断words.|1966346|word-break:+break-all：，只需在行尾的单词中断即可。不需要溢出。|1966347|1966348|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap|1|https://developer.mozilla.org/en-US/docs/Web/CSS/word-break^0|0|9|F|D|0|0|0|0|1|F|0|0|0|0|0|0|6|0|0|A|0|0|0|6|0|0|0|0|1|2|0|0|0|0|0|6|0|0|9|0|0|8|0|0|0|6|1|0|0|9|D|N|2|0|0|0|0|P|0|0|L|0|0^^$0|@$1|2|3|4|5|6|7|23|8|@$9|24|A|25|B|C]|$9|26|A|27|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|28|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|29|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|2A|8|@]|D|@]|E|$]]|$1|K|3|L|5|M|7|2B|8|@$9|2C|A|2D|B|N]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|2E|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|2F|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|2G|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|2H|8|@]|D|@]|E|$]]|$1|T|3|U|5|V|7|2I|8|@$9|2J|A|2K|B|N]]|D|@]|E|$]]|$1|W|3|X|5|V|7|2L|8|@$9|2M|A|2N|B|N]]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|2O|8|@]|D|@]|E|$]]|$1|Z|3|10|5|6|7|2P|8|@]|D|@$9|2Q|A|2R|1|2S]]|E|$]]|$1|11|3|12|5|6|7|2T|8|@]|D|@]|E|$]]|$1|13|3|-4|5|6|7|2U|8|@]|D|@]|E|$]]|$1|14|3|15|5|M|7|2V|8|@$9|2W|A|2X|B|N]]|D|@]|E|$]]|$1|16|3|-4|5|6|7|2Y|8|@]|D|@]|E|$]]|$1|17|3|-4|5|6|7|2Z|8|@]|D|@]|E|$]]|$1|18|3|-4|5|6|7|30|8|@]|D|@]|E|$]]|$1|19|3|1A|5|V|7|31|8|@$9|32|A|33|B|N]]|D|@]|E|$]]|$1|1B|3|1C|5|V|7|34|8|@$9|35|A|36|B|N]]|D|@]|E|$]]|$1|1D|3|1E|5|V|7|37|8|@$9|38|A|39|B|N]]|D|@]|E|$]]|$1|1F|3|-4|5|6|7|3A|8|@]|D|@]|E|$]]|$1|1G|3|10|5|6|7|3B|8|@]|D|@$9|3C|A|3D|1|3E]]|E|$]]|$1|1H|3|-4|5|6|7|3F|8|@]|D|@]|E|$]]|$1|1I|3|1J|5|6|7|3G|8|@$9|3H|A|3I|B|N]|$9|3J|A|3K|B|N]]|D|@]|E|$]]|$1|1K|3|1L|5|6|7|3L|8|@]|D|@]|E|$]]|$1|1M|3|1N|5|6|7|3M|8|@]|D|@]|E|$]]|$1|1O|3|1P|5|V|7|3N|8|@$9|3O|A|3P|B|C]]|D|@]|E|$]]|$1|1Q|3|1R|5|V|7|3Q|8|@$9|3R|A|3S|B|C]]|D|@]|E|$]]|$1|1S|3|-4|5|6|7|3T|8|@]|D|@]|E|$]]|$1|1T|3|-4|5|6|7|3U|8|@]|D|@]|E|$]]]|1U|$1V|$5|1W|1X|1Y|E|$1Z|20]]|21|$5|1W|1X|1Y|E|$1Z|22]]]]

<code>word-wrap</code> has been renamed to <code>overflow-wrap</code> probably to avoid this confusion.

Now this is what we have:

<h2>overflow-wrap</h2>

<blockquote>
 The overflow-wrap property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.
</blockquote>

Possible values:

<ul>
<li>normal: Indicates that lines may only break at normal word break points.</li>
<li>break-word: Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.</li>
</ul>

<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap" rel="noreferrer">source</a>.

<h2>word-break</h2>

<blockquote>
 The word-break CSS property is used to specify whether to break lines within words.
</blockquote>

<ul>
<li>normal: Use the default line break rule.</li>
<li>break-all: Word breaks may be inserted between any character for non-CJK (Chinese/Japanese/Korean) text.</li>
<li>keep-all: Don't allow word breaks for CJK text. Non-CJK text behavior is the same as for normal.</li>
</ul>

<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/word-break" rel="noreferrer">source</a>.

<hr>

Now back to your question, the main difference between overflow-wrap and word-break is that the first determines the behavior on an overflow situation, while the later determines the behavior on a normal situation (no overflow). An overflow situation happens when the container doesn't have enough space to hold the text. Breaking lines on this situation doesn't help because there's no space (imagine a box with fix width and height).

So:

<ul>
<li><code>overflow-wrap: break-word</code>: On an overflow situation, break the words.</li>
<li><code>word-break: break-all</code>: On a normal situation, just break the words at the end of the line. An overflow is not necessary.</li>
</ul>

blocks|key|558066|text|至少在火狐(截至v24)和Chrome+(截至v30)中，当应用于table元素中的内容时：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|558067|word-wrap:break-word|558068|实际上不会导致长单词换行，这可能会导致表超出其容器的边界；|558069|word-break:break-all|558070|将导致单词换行，并且表格适合其容器。|558071|​|558072|📷|atomic|558073|558074|jsfiddle+demo。|558075|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/f9984af7c9c6bb5bc0568cc904dfb2eb.png|imageAlt|1|LINK|MUTABLE|url|http://jsfiddle.net/SDGAX/1/^0|X|5|0|0|K|0|0|0|K|0|0|0|0|1|0|0|0|0|D|1|0^^$0|@$1|2|3|4|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1F|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|1J|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|1K|8|@]|D|@]|E|$]]|$1|P|3|Q|5|R|7|1L|8|@]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|S|3|O|5|6|7|1P|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|1Q|8|@]|D|@$9|1R|A|1S|1|1T]]|E|$]]|$1|V|3|-4|5|6|7|1U|8|@]|D|@]|E|$]]]|W|$X|$5|Y|Z|10|E|$11|12|13|-4]]|14|$5|15|Z|16|E|$17|18]]]]

At least in Firefox (as of v24) and Chrome (as of v30), when applied to content in a <code>table</code> element:

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

will not actually cause long words to wrap, which can result in the table exceeding the bounds of its container; 

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

will result in words wrapping, and the table fitting within its container. 

<img src="https://i.stack.imgur.com/ksVnE.png" alt="enter image description here">

<a href="http://jsfiddle.net/SDGAX/1/" rel="noreferrer">jsfiddle demo</a>.

blocks|key|1848167|text|和有很大的不同。break-word只会拆分不适合容器的单词。而break-all将无情地尝试最大限度地增加每行的字符量，并无情地导致“不必要的断字”，这看起来很可怕。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|1848168|示例|1848169|在6个字符宽的容器内以等宽字体呈现字符串This+is+a+text+from+an+old+magazine。|1848170|在word-break:+break-all中，大多数单词都被破坏了，看起来是不可编辑的：|1848171|This+i
s+a+te
xt+fro
m+an+o
ld+mag
azine|code-block|syntax|javascript|1848172|break-all所做的就是逐行查找，只在每行上放6个字符，直到没有剩余的字符为止。它会毫不留情地做到这一点，即使是像"is“这样的两个字母的单词也可以分成两行。这看起来非常糟糕，我永远不会用它来渲染文本。|1848173|在word-wrap:+break-word中，只有长词会被打断：|1848174|This
is+a
text
from
an+old
magazi
ne|1848175|break-word所做的要好得多。它只拆分那些永远无法适应容器宽度的单词。不适合当前行的单词会被简单地推到下一行。因此，在本例中，如果容器适合每行6个字符，它必须断开一个8个字符的单词，比如“杂志”，但它永远不会断开一个更短的单词，比如"text“。|1848176|​|1848177|<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|1848178|1848179|entityMap^0|0|1|8|A|W|9|0|0|K|Z|0|1|L|0|0|0|9|0|1|L|0|0|0|A|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|D]|$9|1B|A|1C|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|1D|8|@]|E|@]|F|$]]|$1|I|3|J|5|6|7|1E|8|@$9|1F|A|1G|B|D]]|E|@]|F|$]]|$1|K|3|L|5|6|7|1H|8|@$9|1I|A|1J|B|D]]|E|@]|F|$]]|$1|M|3|N|5|O|7|1K|8|@]|E|@]|F|$P|Q]]|$1|R|3|S|5|6|7|1L|8|@$9|1M|A|1N|B|D]]|E|@]|F|$]]|$1|T|3|U|5|6|7|1O|8|@$9|1P|A|1Q|B|D]]|E|@]|F|$]]|$1|V|3|W|5|O|7|1R|8|@]|E|@]|F|$P|Q]]|$1|X|3|Y|5|6|7|1S|8|@$9|1T|A|1U|B|D]]|E|@]|F|$]]|$1|Z|3|10|5|6|7|1V|8|@]|E|@]|F|$]]|$1|11|3|12|5|O|7|1W|8|@]|E|@]|F|$P|Q]]|$1|13|3|10|5|6|7|1X|8|@]|E|@]|F|$]]|$1|14|3|-4|5|6|7|1Y|8|@]|E|@]|F|$]]]|15|$]]

There's a huge difference. <code>break-word</code> will only break words that don't fit the container. While <code>break-all</code> will ruthlessly try to max the amount of chars per row and will ruthlessly cause &quot;unnecessary word-breaks&quot; which looks horrible IMO.
<h1>Example</h1>
Rendering the string <code>This is a text from an old magazine</code> in a monospace font inside a container which is 6 chars wide.
<h1>With <code>word-break: break-all</code> most words are broken and it looks unredable:</h1>
<pre class="lang-none prettyprint-override"><code>This i
s a te
xt fro
m an o
ld mag
azine
</code></pre>
What <code>break-all</code> does is to go row-by-row and just put 6 characters on each row until there are none remaining. It will do this ruthlessly, even two-letter-words like &quot;is&quot; can be divided into 2 rows. This looks absolutely terrible and I would never use it to render text.
<h1>With <code>word-wrap: break-word</code> only the long words get broken:</h1>
<pre class="lang-none prettyprint-override"><code>This
is a
text
from
an old
magazi
ne
</code></pre>
What <code>break-word</code> does is much nicer. It only breaks words that could never fit the width of the container. Words that can't fit on the current row are simply pushed to the next row. So in this case with a container that fits 6-chars-per-row it has to break an 8 char word like &quot;magazine&quot; but it would never break a shorter word like &quot;text&quot;.
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width: 100px; border: solid 1px black; font-family: monospace;"&gt;
 &lt;h1 style="word-break: break-all;"&gt;This is a text from an old magazine&lt;/h1&gt;
 &lt;hr&gt;
 &lt;h1 style="word-wrap: break-word;"&gt;This is a text from an old magazine&lt;/h1&gt;
&lt;/div</code></pre>
</div>
</div>

blocks|key|1847899|text|这就是我能找到的全部。不确定它是否有帮助，但我想我应该把它加进去。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1847900|自动换行|offset|length|style|BOLD|1847901|此属性指定如果内容超出元素的指定呈现框的边界，当前呈现的线条是否应中断(这在某些方面类似于意图上的“clip”和“overflow”属性。)仅当元素具有可视呈现、是具有显式高度/宽度的内联元素、绝对定位和/或是块元素时，才应应用此属性。|1847902|分词|1847903|此属性控制单词内的换行行为。在一个元素中使用多种语言的情况下，它特别有用。|1847904|entityMap^0|0|0|4|0|0|0|2|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@$D|R|E|S|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|T|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|U|8|@$D|V|E|W|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|X|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|O|$]]

This is all i can find out. Not sure if it helps, but thought I'd add it to the mix.

WORD-WRAP

This property specifies whether the current rendered line should break if the content exceeds the boundary of the specified rendering box for an element (this is similar in some ways to the ‘clip’ and ‘overflow’ properties in intent.) This property should only apply if the element has a visual rendering, is an inline element with explicit height/width, is absolutely positioned and/or is a block element.

WORD-BREAK

This property controls the line breaking behavior within words. It is especially useful in cases where multiple languages are used within an element.

blocks|key|1966254|text|word-break:break-all：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1966255|单词继续边框，然后换行。|1966256|word-wrap:break-word：|1966257|首先，在换行符中换行，然后继续边界。|1966258|示例：|1966259|​|1966260|div+{
+++border:+1px+solid+red;
+++width:+200px;
}

span+{
++background-color:+yellow;
}

.break-all+{
++word-break:break-all;
+}
.break-word+{
++word-wrap:break-word;++
}|code-block|syntax|javascript|1966261|word-break:break-all

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

+word-wrap:break-word

<div+class="break-word">
++This+text+is+styled+with
++soooooooooooooooooooooooooome+of+the+text
++formatting+properties.
</div>|1966262|1966263|entityMap^0|0|K|0|0|0|K|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|16|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|17|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|18|8|@]|D|@]|E|$]]|$1|P|3|Q|5|R|7|19|8|@]|D|@]|E|$S|T]]|$1|U|3|V|5|R|7|1A|8|@]|D|@]|E|$S|T]]|$1|W|3|O|5|6|7|1B|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|Y|$]]

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

word to continue to border then break in newline.

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

At first , word wrap in newline then continue to border.

Example :

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
 border: 1px solid red;
 width: 200px;
}

span {
 background-color: yellow;
}

.break-all {
 word-break:break-all;
 }
.break-word {
 word-wrap:break-word; 
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;b&gt;word-break:break-all&lt;/b&gt;

&lt;div class="break-all"&gt;
 This text is styled with
 &lt;span&gt;soooooooooooooooooooooooooome&lt;/span&gt; of the text
 formatting properties.
&lt;/div&gt;

&lt;b&gt; word-wrap:break-word&lt;/b&gt;

&lt;div class="break-word"&gt;
 This text is styled with
 &lt;span&gt;soooooooooooooooooooooooooome&lt;/span&gt; of the text
 formatting properties.
&lt;/div&gt;</code></pre>
</div>
</div>

blocks|key|545773|text|从各自的W3+specifications+-which中，由于缺乏上下文，恰好非常不清楚-可以推断出以下结论：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|545774|545775|word-break:+break-all用于在中日韩(中文、日语或韩语)字符中拆分外国的、非中日韩(比如西方)单词writings.|unordered-list-item|style|CODE|545776|word-wrap:+break-word用于在非混合(假设完全是西方)语言中进行单词拆分。|545777|545778|至少，这些是W3的意图。实际发生的情况是浏览器不兼容导致的重大失误。这是an+excellent+write-up+of+the+various+problems+involved。|545779|下面的代码片段可以作为如何在跨浏览器环境中使用CSS实现自动换行的总结：|545780|-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;|code-block|syntax|javascript|545781|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/css3-text/|1|http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/^0|4|H|0|0|0|0|L|0|0|L|0|0|10|1I|1|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@$A|16|B|17|1|18]]|C|$]]|$1|D|3|-4|5|6|7|19|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|1A|8|@$A|1B|B|1C|H|I]]|9|@]|C|$]]|$1|J|3|K|5|G|7|1D|8|@$A|1E|B|1F|H|I]]|9|@]|C|$]]|$1|L|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]|$1|M|3|N|5|6|7|1H|8|@]|9|@$A|1I|B|1J|1|1K]]|C|$]]|$1|O|3|P|5|6|7|1L|8|@]|9|@]|C|$]]|$1|Q|3|R|5|S|7|1M|8|@]|9|@]|C|$T|U]]|$1|V|3|-4|5|6|7|1N|8|@]|9|@]|C|$]]]|W|$X|$5|Y|Z|10|C|$11|12]]|13|$5|Y|Z|10|C|$11|14]]]]

From the respective <a href="http://www.w3.org/TR/css3-text/" rel="noreferrer">W3 specifications</a> —which happen to be pretty unclear due to a lack of context— one can deduce the following:

<ul>
<li><code>word-break: break-all</code> is for breaking up foreign, non-CJK (say Western) words in CJK (Chinese, Japanese or Korean) character writings.</li>
<li><code>word-wrap: break-word</code> is for word breaking in a non-mixed (let us say solely Western) language.</li>
</ul>

At least, these were W3's intentions. What actually happened was a major cock-up with browser incompatibilities as a result. Here is <a href="http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/" rel="noreferrer">an excellent write-up of the various problems involved</a>.

The following code snippet may serve as a summary of how to achieve word wrapping using CSS in a cross browser environment:

<pre><code>-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;
</code></pre>

blocks|key|1966225|text|除了前面的评论之外，浏览器对word-wrap的支持似乎比对word-break的支持要好一些。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1966226|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap|1|https://developer.mozilla.org/en-US/docs/Web/CSS/word-break^0|E|9|U|A|E|9|0|U|A|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@$9|U|A|V|1|W]|$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]|N|$5|I|J|K|E|$L|O]]]]

In addition to the previous comments browser support for <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap" rel="nofollow"><code>word-wrap</code></a> seems to be a bit better than for <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/word-break" rel="nofollow"><code>word-break</code></a>.

blocks|key|545706|text|单是分词和换行的定义就很容易让你头晕，但当比较这两个词时，具体来说，更容易这样想：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|545707|首先，您可能希望使用overflow:+auto；，并且您可能想尝试单独使用overflow:auto；：如果您可以容忍需要滚动容器中的文本，而不是具有任意的换行位置，那么它可能正是您所需要的。|545708|然后请记住，在此上下文中，"word“是其中没有空格的字符串。|545709|分词:全部分页；优先考虑在避免溢出的同时最小化浪费的空间，然后保持任何单词不间断，因此它不会在任何地方换行，除非在正确的页边距。它甚至在包含的文本中用空格代替换行符。如果你想尽可能避免滚动，并使用一个足够宽的容器来保证可读性，这是很有用的:但是，如果你的容器太窄，结果通常不是很令人满意，正如Drkawashima指出的那样。|545710|换行/溢出换行:换行；优先保持任何和所有单词不中断，同时避免溢出，因此如果一个单词太长，无法放在该行的其余部分，它将首先换行，并尝试将文本的其余部分放到下一行，即使这意味着将上面的行短到只有一个字符。如果你想要最大的可读性，同时尽可能避免滚动，并使用足够宽的容器，这是很有用的:否则，你可能只想使用overflow:+auto来代替。|545711|关于word-wrap，它并没有真正被取代(也许世界各地使用的浏览器也比overflow-wrap更普遍地认可它)：它成为overflow-wrap的别名，因为所有的大浏览器和许多网页都已经采用了word-wrap，尽管最初没有在标准中定义。然而，由于它的广泛使用，当overflow-wrap被定义时，它并没有被丢弃，而是被定义为今天的别名，并且由于遗留原因，UA(用户代理，例如web浏览器)必须将word-wrap作为overflow-wrap属性的遗留名称别名来处理。因此，它已经成为W3C事实上的标准，而且它不会很快消失(也许当W3C标准消失，或者整个网络被带有AI的机器人普遍更新时)。|545712|https://www.w3.org/TR/css-text-3/#overflow-wrap-property|offset|length|545713|https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap|545714|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|0|0|0|0|0|1K|0|0|0|1Q|1|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|14|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|15|8|@]|9|@$N|16|O|17|1|18]]|A|$]]|$1|P|3|Q|5|6|7|19|8|@]|9|@$N|1A|O|1B|1|1C]]|A|$]]|$1|R|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|M]]|Y|$5|U|V|W|A|$X|Q]]]]

The definitions alone of word-break and word-wrap can easily make your head spin, but when comparing these two, specifically, it's much easier to think of them like this:
First of all you would probably like to use overflow: auto; as well, and you might want to try what using that alone looks like: if you can tolerate needing to scroll the text in the container rather than having arbitrary wrap positions, it might be just what you need.
Then keep in mind that in this context, a &quot;word&quot; is a string with no whitespaces in it.
word-break: break-all;
Prioritizes minimizing the space wasted while avoiding overflow, before keeping any words unbroken, so it never wraps anywhere but at the right margin. It even replaces line breaks with spaces in the contained text. This is useful if you want to avoid scrolling as much as possible and use a container that is enough wide for readability: however if your container is too narrow the result is in general not very satisfying, as Drkawashima noted.
word-wrap/overflow-wrap: break-word;
Prioritizes keeping any and all words unbroken while avoiding overflow, so if a word is too long to fit on the rest of the line, it wraps first and tries to fit the rest of the text on the next line even if it means leaving the line above as short as only one single character. This is useful if you want maximum readability while avoiding scrolling as much as possible and use a container that is enough wide: otherwise you might want to use only overflow: auto in stead.
Regarding word-wrap, it isn't really replaced(and maybe also more universally recognized then overflow-wrap by the browsers in use worldwide): it became an alias for overflow-wrap because all the big browsers and many many webpages had already adopted word-wrap although originally not being defined in the standards. However, because of the widespread use it wasn't discarded when overflow-wrap was defined but rather defined as the alias it is today, and for legacy reasons, UAs(User-Agents, e.g web browsers) must treat word-wrap as a legacy name alias of the overflow-wrap property. So it has become a de facto standard of W3C and it isn't going away any day soon (perhaps when the W3C standard becomes extinct or the entire web is universally updated by bots with AI).
<a href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property" rel="nofollow noreferrer">https://www.w3.org/TR/css-text-3/#overflow-wrap-property</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap</a>

blocks|key|558450|text|overflow-wrap：断字；|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|558451|参考文献|558452|https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap|558453|entityMap|0|LINK|mutability|MUTABLE|url^0|E|2|0|0|0|1Q|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|J|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|I]]]]

overflow-wrap: break-word;
Reference
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap</a>

blocks|key|558488|text|CSS中的分词属性用于指定在到达行尾时如何分词或拆分单词。换行属性用于拆分/断开长单词，并将它们换行到下一行。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|558489|“word-break:break-all；”和“word-wrap:break-word；”的区别。|558490|断字:全部断字，用于在任意字符处断字，以防溢出。换行:断开词；用于在任意位置将单词换开，以防止溢出。|558491|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line.
Difference between the “word-break: break-all;” and “word-wrap: break-word;”
word-break: break-all; It is used to break the words at any character to prevent overflow.
word-wrap: break-word; It is used to break the words at arbitrary points to prevent overflow.

I am currently wondering what is the difference between the two. When I used both they seem to break the word if it is not fitting the container. But why did W3C made two ways to do it?

What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我现在想知道两者之间的区别是什么。当我使用这两个词时，如果它不适合容器，它们似乎会破坏这个词。但是为什么W3C提出了两种方法呢？

问CSS中的"word-break: break-all“和"word-wrap: break-word”有什么不同
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS中的"word-break: break-all“和"word-wrap: break-word”有什么不同EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS中的"word-break: break-all“和"word-wrap: break-word”有什么不同
EN