CSS-свойство overflow-wrap
Свойство overflow-wrap в CSS определяет, будет ли перенос строки внутри строчного блока. Описание, значения и примеры.
Свойство overflow-wrap сообщает браузеру, разрешено ли разрывать обычно неразрывную строку — длинное слово, URL или хеш — на новую строку, чтобы текст не выходил за пределы контейнера.
По умолчанию CSS вставляет переносы строк только в «мягких» точках переноса, таких как пробелы и дефисы. Одна длинная строка без таких символов (supercalifragilisticexpialidocious или https://example.com/a/very/long/path) не имеет места для переноса и переполняет свой блок. overflow-wrap позволяет разрешить разрыв внутри такой строки в качестве последнего средства.
Когда использовать
Используйте overflow-wrap, когда контент создаётся пользователями или непредсказуем — комментарии, поисковые запросы, адреса электронной почты, ссылки, идентификаторы кода. Именно такие строки не имеют естественных точек переноса и могут разрушить колонку фиксированной ширины, карточку или flex-элемент. Типичное защитное правило:
.user-content {
overflow-wrap: break-word;
}Это сохраняет макет нетронутым, не влияя на обычный текст, потому что перенос срабатывает только тогда, когда слово иначе выйдет за границы.
Значения вкратце
Свойство overflow-wrap имеет три значимых значения — normal, break-word и anywhere — а также универсальные CSS-ключевые слова initial и inherit.
normal— значение по умолчанию. Слова разрываются только в обычных точках переноса (пробелы, дефисы). Слишком длинное слово переполняет контейнер.break-word— длинное слово разрывается в произвольной точке только тогда, когда иначе оно вышло бы за границы. Принципиально важно, что оно не уменьшает минимальную внутреннюю ширину элемента, поэтому редко нарушает остальной макет.anywhere— аналогичноbreak-word, но точка разрыва учитывается при расчёте минимального размера содержимого элемента, поэтому flex- или grid-элемент может сужаться меньше своего самого длинного слова.
overflow-wrap — стандартное название устаревшего свойства word-wrap. word-wrap сохраняется как псевдоним для обратной совместимости — они принимают одинаковые значения и работают идентично. Используйте overflow-wrap в новом коде.
Overflow-wrap и word-break
overflow-wrap и word-break оба влияют на то, где могут разрываться строки, но отвечают на разные вопросы.
overflow-wrapразрывает слово только в крайнем случае, когда иначе оно вышло бы за границы, независимо от языка.word-breakуправляет разрывом проактивно. Оно предназначено главным образом для языков CJK (китайского, японского, корейского), где разрывы между символами являются нормой, а его значениеbreak-allбудет разрывать латинские слова посередине символа, даже если они могли бы уместиться.
Практическое правило: используйте overflow-wrap: break-word для предотвращения переполнения без изменения обычного переноса; используйте word-break: break-all только тогда, когда вам действительно нужен агрессивный перенос на уровне символов.
Для разрыва слов на смысловых границах слогов с дефисом см. свойство hyphens, а для управления пробелами и переносом в целом — white-space.
Сводка по свойству
| Начальное значение | normal |
|---|---|
| Применяется к | Все элементы. |
| Наследуется | Да. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.overflowWrap = "normal"; |
Синтаксис
Синтаксис CSS overflow-wrap
overflow-wrap: normal | anywhere | break-word | initial | inherit;Порядок ключевых значений важен в сокращённых объявлениях, но для overflow-wrap вы просто указываете одно значение за раз.
Пример свойства overflow-wrap
Каждый абзац ниже ограничен шириной 200px. Длинная строка dummydummy… не содержит пробелов, поэтому при значении normal она выходит за границы, тогда как break-word и anywhere принудительно переносят её внутри блока.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
width: 200px;
margin: 3px;
background: #ccc;
}
.anywhere {
overflow-wrap: anywhere;
}
.break-word {
overflow-wrap: break-word;
}
.normal {
overflow-wrap: normal;
}
</style>
</head>
<body>
<h2>Overflow-wrap property example</h2>
<h3>Overflow-wrap: normal</h3>
<p>Lorem Ipsum has been the industry's standard <em class="normal"> dummydummydummydummydummydummydummydummy</em> text ever since the 1500s...
</p>
<h3>Overflow-wrap: anywhere</h3>
<p>Lorem Ipsum has been the industry's standard <em class="anywhere">dummydummydummydummydummydummydummydummy </em> text ever since the 1500s...
</p>
<h3>Overflow-wrap: break-word</h3>
<p>Lorem Ipsum has been the industry's standard <em class="break-word">dummydummydummydummydummydummydummydummy </em> text ever since the 1500s...
</p>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| normal | Строки будут переноситься только по обычным правилам переноса строк. Слова не разрываются, даже если они выходят за границы контейнера. Это значение по умолчанию для данного свойства. |
| anywhere | Длинные слова или URL будут разорваны в любом месте, если в строке нет иных допустимых точек разрыва. Символы переноса не считаются допустимыми точками разрыва, даже если задано свойство hyphens. |
| break-word | Длинные слова или строки, не помещающиеся в контейнер, будут разорваны в произвольной точке для принудительного переноса строки. Мягкие точки переноса не учитываются при вычислении минимального размера содержимого элемента. |
| initial | Устанавливает для свойства значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |