Difference Between Overflow-Wrap and Word-Break

Difference between overflow-wrap and word-break?

Quoting from source

overflow-wrap: The overflow-wrap CSS 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.
word-wrap: The word-wrap property was renamed to overflow-wrap in CSS3.
word-break: The word-break CSS property is used to specify how (or if) to break lines within words

So, you need word-break in combination with word-wrap, which is the right combination.

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

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>

Difference between overflow-wrap: anywhere & overflow-wrap: break-word?

Most of the time they're very similar.

One case when they're different: when you have a super long word (like an url) that is longer than the width of the container, and the container is a flex item with flex-grow, then anywhere will break the long word, whereas break-word will try to grow aggressively and avoid breaking the word when possible, which may squeeze other flex items out of proportion.

In this case, anywhere is more likely what you want. If that's true, you might as well do this:

overflow-wrap: break-word;
overflow-wrap: anywhere;

Because browser supports of break-word is better than anywhere, and browsers that don't support anywhere will ignore the 2nd line, which is not too bad.

Css: overflow-wrap: break-word; word-wrap: break-word; Differences

There is no difference between the two. overflow-wrap is the same as word-wrap. As you pointed out, word-wrap was renamed to overflow-wrap as this Post shows.

What is the differect between word-wrap and overflow-wrap?

Yes both are same. You may follow this article about this topic.
Dealing with long words in css

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

The W3 specification that talks about these seem to suggest that word-break: break-all is for requiring a particular behaviour with CJK (Chinese, Japanese, and Korean) text, whereas word-wrap: break-word is the more general, non-CJK-aware, behaviour.

Difference between word-wrap: break-word and word-break: break-word

Update

If you plan on breaking words and want to hyphenate as well, try the following:

.hyphenate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

This worked even in Chrome ... sort of ... sans hyphens. Anyways a detailed explanation is in this article.

word-break:break-word is not documented and only master developers know this ultra secret technique like the Quivering Palm of Death.

Actually it's an obscure -webkit- property that works like word-wrap: break-word but it's also used on dynamic lengths as well.

Kenneth.io - Word Wrapping Hypernation Using CSS

CSS-Tricks - word-break

From CaniUse:

Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word.

Difference Between Overflow-Wrap and Word-Break