word-break and overflow-wrap
A support email address broke out of a card on a client’s contact page and I typed word-break: break-all at it, the way I always had.
That is the wrong one, and it took a designer asking why the paragraph above looked shredded for me to go and read what the two actually do.
overflow-wrap: break-word breaks a word only when the word cannot fit on a line by itself. Everything else wraps normally. That is what you want for a long URL or an email address in a narrow column.
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 reads as damage.
So the order is: reach for overflow-wrap first, always. Reach for word-break when you genuinely have a run of characters with no spaces in it at all and no natural break point, which in eleven years I think I have 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 quiet argument for putting one there.