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.
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.
