overflow-wrap: break-word vs. word-break: break-word

Question

What is the difference between overflow-wrap: break-word and word-break: break-word?

As you see from the following example, there is no visual difference between option-1 and option-2. (You need to uncomment either one.)

body {
  width: 300px;
}

.dont-break-out {
  /* Option 1 */
  /* overflow-wrap: break-word; */ 
  /* Option 2 */
  /* word-break: break-word; */
}

<p class="dont-break-out" lang="en-US">For more information, please visit: http://csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.</p>

<p class="dont-break-out" lang="en-US">According to Wikipedia, The longest word in any of the major English language dictionary is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.</p>

Not dupes:

• Difference between overflow-wrap and word-break? - The accepted answer is just few small quotes from MDN and there are no examples. To be honest, I'm not sure that the person who posted it really understands the difference himself.

• Do `overflow-wrap: break-word` and `word-break: break-word` ever behave differently? - Again, no example, and so it is very hard to understand what is really assumed.

Please, could you provide an example to show a difference between them?

And yes, I know that word-wrap is an alias to overflow-wrap. My question is not about it.

edit

An interesting remark by Louis Lazaris on CSS Tricks:

overflow-wrap and word-break behave very similarly and can be used to solve similar problems. A basic summary of the difference, as explained in the CSS specification is:

• overflow-wrap is generally used to avoid problems with long strings causing broken layouts due to text flowing outside a container.
• word-break specifies soft wrap opportunities between letters commonly associated with languages like Chinese, Japanese, and Korean (CJK).

After describing examples of how word-break can be used in CJK content, the spec says: "To enable additional break opportunities only in the case of overflow, see overflow-wrap".

From this, we can surmise that word-break is best used with non-English content that requires specific word-breaking rules, and that might be interspersed with English content, while overflow-wrap should be used to avoid broken layouts due to long strings, regardless of the language used.

But Louis haven't provided any examples. I performed the same test as above with the following text from the work-break page by MDN:

Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉

... and there is still no difference between overflow-wrap: break-word and word-break: break-word.

Ipomoea

Answer 1

The difference lies in the way min content intrinsic sizes are calculated. Soft wrap opportunities introduced by the break are taken into account for word-break:break-word but not for overflow-wrap:break-word. So for an example of the difference between them, we need to choose something that sizes according the min content intrinsic size, such as a float:

body {
  width:160px;
}
p {
   float:left;
   border:1px solid;
}

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

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

<p>A popular long word in Engish is 
  <i class="overflow-wrap">antidisestablishmentarianism</i>,
  although longer more contrived words exist</p>
<p>A popular long word in Engish is 
  <i class="word-break">antidisestablishmentarianism</i>,
  although longer more contrived words exist</p>

word-break:break-word has the same effect as overflow-wrap:anywhere.

Ace

Answer 2

Looks like overflow-wrap provides more opportunities for the text to wrap.

I modified your code to show both cases, one after the other, for easier comparison.

Edit: good catch on the missing { - after fixing that I agree there appears to be no difference.

I'll leave this answer here as it is still a good code sample for testing alternatives.

body {
  width: 300px;
}

.break-1 {
  overflow-wrap: break-word;
}

.break-2 {
  word-break: break-word;
}

<p class="break-1" lang="en-US">For more information, please visit: http://csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.</p>

<p class="break-2" lang="en-US">For more information, please visit: http://csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.</p>

<p class="break-1" lang="en-US">According to Wikipedia, The longest word in any of the major English language dictionary is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.</p>

<p class="break-2" lang="en-US">According to Wikipedia, The longest word in any of the major English language dictionary is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.</p>

<p class="break-1">Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>

<p class="break-2">Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>

Attorneyatlaw

Oops. I upvoted your answer, but it seems it was too early :) Actually, you have a missing { in break-2. If you add this {, there will be no difference. – Ipomoea

Answer 3

OK, it seems I have found the answer, but I'm not really sure.

---

As per a comment at GitHub, it seems that overflow-wrap: break-word is now catches all cases of word-break: break-word, and so the latter one is redundant except if used for a backward compatibility.

Note that the behavior of this feature—allowing breaks anywhere if the word cannot fit its container (per word-wrap/overflow-wrap: break-word) and also having these break opportunities affect the min-content size—is now specified for word-wrap/overflow-wrap: break-word. See #2682

This means that once implementations catch up, there is no use case requiring word-break: break-word to be added (since overflow-wrap: break-word now has this behavior), and the only reason to add this second syntax would be if it's needed for Web-compat.

Ipomoea

Fantasai reverted the change to the spec that made the two the same on 16 Sept 2018, because it wasn't web-compatible. – Ace