Как перенести длинное слово

Короткий ответ

overflow-wrap: anywhere разрешает разорвать слово, если оно не помещается в строку:

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

Обычные слова при этом переносятся как раньше — по пробелам. Рвутся только те, что не влезают целиком.

Переносы по слогам

hyphens: auto расставляет переносы с дефисом по правилам языка. Нужен атрибут lang, чтобы браузер знал, какой это язык:

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

break-word и word-break

word-break: break-all рвёт любые слова в любом месте, даже те, что поместились бы на следующей строке, — текст выглядит рваным. Старое значение word-break: break-word устарело; используйте overflow-wrap.

Частая ошибка

Длинная ссылка в комментарии или email в карточке растягивает колонку и создаёт горизонтальную прокрутку на телефоне. Добавьте overflow-wrap: anywhere заранее — для всех блоков с пользовательским текстом.