Свойство word-break

Описание

Указывает, как делать перенос строк внутри слов, которые не помещаются по ширине в заданную область.

Синтаксис

word-break: normal | break-all | keep-all;

Пример

<!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уществительное

высокопревосходительство

Одушевленное существительное

одиннадцатиклассница

Химическое вещество

метоксихлордиэтиламинометилбутиламиноакридин

Свойство word-break

Описание

Синтаксис

Пример

Читайте также

Свойство background-origin

Свойство animation-play-state

Свойство grid-column

Стили поля с неверными значениями, выходящими из заданного диапазона

Пустые элементы

Значение	Описание
normal	Используются правила переноса строк по умолчанию. Как правило, в этом случае строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью br).
break-all	Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока. Значение не работает для текста на китайском, корейском или японском языке.
keep-all	Не разрешает перенос строк в словах на китайском, корейском или японском языке. Для остальных языков действует как normal.