How to wrap long words

Short answer

overflow-wrap: anywhere allows a word to break when it does not fit on a line:

<p style="width: 180px; border: 1px solid silver;">Bad: https://example.com/a/very/long/link/without/spaces</p>
<p style="width: 180px; border: 1px solid silver; overflow-wrap: anywhere;">Good: https://example.com/a/very/long/link/without/spaces</p>

Normal words still wrap as before — at spaces. Only the ones that cannot fit are broken.

Hyphenation

hyphens: auto adds hyphens by the language's rules. It needs the lang attribute so the browser knows the language:

<p lang="en" style="width: 120px; hyphens: auto; border: 1px solid silver;">Internationalization and incomprehensibility</p>

break-word and word-break

word-break: break-all breaks any word anywhere, even words that would fit on the next line, so the text looks ragged. The old value word-break: break-word is deprecated; use overflow-wrap.

Common mistake

A long link in a comment or an email in a card stretches the column and creates sideways scrolling on a phone. Add overflow-wrap: anywhere in advance to every block with user-written text.