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

I needed to fix some CSS somewhere because my text wasn't wrapping around and was instead going on indefinitely if it was an extremely long word.

Like in most cases, I tried word-wrap: break-word; in my CSS file and it did not work.

Then, to my surprise, and by the suggestion of Google Chrome Developer Tools, I tried word-break: break-word; and it fixed my problem. I was shocked by this so I've been googling to know the difference between these two but I have seen nothing on the subject.

Further, I don't think word-break: break-word; is documented behavior seeing as how W3 has no mention of it. I tested it on Safari and Chrome, and it works perfectly on both, but I'm hesitant to use word-break: break-word; because I see no mention of it anywhere.

Solution

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.