overflow-wrap
Разрешает разрывать длинное слово, чтобы оно не вылезало за блок.
Синтаксис
overflow-wrap: anywhere;Значения
| Параметр | Тип | Описание |
|---|---|---|
| normal | keyword | Длинные слова вылезают за блок. |
| break-word | keyword | Разрывать слово, только если оно не помещается даже на отдельной строке. |
| anywhere | keyword | То же, и блок к тому же может сжиматься уже длины слова. |
Примеры
Длинная ссылка в узкой колонке:
<style>
p { width: 160px; border: 1px solid lightgray; }
</style>
<p>Without: https://example.com/a/very/long/address/that/does/not/fit</p>
<p style="overflow-wrap: anywhere;">With: https://example.com/a/very/long/address/that/does/not/fit</p>Примечания
Хорошее значение по умолчанию для текста от пользователей — комментариев, сообщений чата: длинные ссылки и строки из букв не сломают вёрстку. Старое название свойства — word-wrap.
См. также
- word-break — Можно ли разрывать слова между любыми буквами.
- hyphens — Автоматический перенос слов по слогам в конце строки.
- overflow — Что делать с содержимым, которое не помещается в элемент.
Вопросы и ответы по теме
В учебнике
- Переполнение и слои — Что делать, когда содержимое не помещается в блок — overflow, прокрутка, многоточие — и как z-index решает, какой элемент лежит сверху.