Как защитить верстку от длинных строк?

Интерфейс может сломаться из-за длинного текста: URL, email, UUID. Он не переносится и раздувает контейнер.

Часто пытаются решать через word-break:
.text {
word-break: break-all;
}

Но это агрессивный вариант, слова ломаются, читаемость страдает.

Есть более аккуратное решение. Браузер будет переносить текст только при необходимости, чтобы избежать переполнения:
.text {
overflow-wrap: anywhere;
}

В обычных условиях слова не трогаются, но при нехватке места могут переноситься.

Если используешь flex/grid — иногда нужен min-width: 0, иначе элемент может не сжиматься.

Это полезно для чатов, таблиц, карточек, комментариев и любых данных, которые ты не контролируешь.

Code Ready | #совет