word-break and overflow-wrap
A practice’s appointments email broke out of a card on their contact page and I typed word-break: break-all at it like I always had.
That’s the wrong one. I didn’t go and read what the two actually do until a designer asked why the paragraph above it looked shredded.
overflow-wrap: break-word only breaks a word when the word can’t fit on a line by itself. Everything else wraps normally. That’s what you want for a long URL or an email address in a narrow column.
IE, Edge, and Firefox still only know it by its old name, word-wrap. So for now you write word-wrap: break-word first and the new one under it.
word-break: break-all breaks any word at any character the moment it reaches the edge. The long email address fits and so does every ordinary sentence around it, chopped mid-word with no hyphen. On a wide paragraph it looks like damage.
So the order is overflow-wrap first, always. Reach for word-break when you really do have a run of characters with no spaces in it at all and no natural break point, which I think I’ve hit twice.
hyphens: auto is the third one in the family and the one I forget exists. It needs a lang attribute on the document to know which dictionary to use, which is a nice little argument for putting one there.