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.

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.