Свойство word-break
Описание
Указывает, как делать перенос строк внутри слов, которые не помещаются по ширине в заданную область.
Синтаксис
word-break: normal | break-all | keep-all;| Значение | Описание |
| normal | Используются правила переноса строк по умолчанию. Как правило, в этом случае строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью br). |
| break-all | Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока. Значение не работает для текста на китайском, корейском или японском языке. |
| keep-all | Не разрешает перенос строк в словах на китайском, корейском или японском языке. Для остальных языков действует как normal. |
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
.col {
background: #f0f0f0;
width: 180px;
padding: 10px;
word-break: break-all;
}
</style>
<div class='col'>
<p>Cуществительное</p>
<p>высокопревосходительство</p>
<p>Одушевленное существительное</p>
<p>одиннадцатиклассница</p>
<p>Химическое вещество</p>
<p>метоксихлордиэтиламинометилбутиламиноакридин</p>
</div>
</body>
</html>Cуществительное
высокопревосходительство
Одушевленное существительное
одиннадцатиклассница
Химическое вещество
метоксихлордиэтиламинометилбутиламиноакридин
Читайте также
Свойство color-scheme
Позволяет элементу указать, в каких цветовых схемах он может удобно отображаться.<br><br...
Свойство text-stroke
Одновременно устанавливает цвет и толщину контура вокруг букв и символов текста.
Свойство align-items
Используется для выравнивания флекс - элементов внутри контейнера, в перпендикулярном направлении.
Свойство border-image
Используется для отображения рисованной рамки вокруг элемента. Толщина рамки задаётся свойством b...
Свойство border-right-color
Устанавливает цвет правой границы элемента.