Intelligent Word Breaks

I recently was posed with the problem that CSS word-wrap: break-word was leading to not-so-intelligent results. Word wrapping will break up words but without any real regard to the word. 

Usually this means slightly awkward word breaks but there can be all sorts of unintended results if say, the word Therapist was broken up between e and r, making for a bad Arrested Development joke.

However there’s a little used property, CSS-hypens that will break word at the hyphen if it ends up at the end of a line. 

Using the CSS property of CSS hyphens, combined with invisible hyphens ( ­ ), you can create your own intelligent word breaks. I’ve attached the below codepen. I’d recommend visiting it at CodePen so you can resize the window.