word-break CSS

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

Значение по умолчанию:

normal

Наследуется:
Да
Применяется:

Ко всем элементам

Анимируется:
Нет
Объект JavaScript:

object.style.wordBreak

Спецификации:
Поддержка браузерами:

Can I Use word-break? Data on support for the word-break feature across the major browsers from caniuse.com.

Синтаксис

word-break: normal 
word-break: break-all 
word-break: keep-all

/* Global values */
word-break: inherit;
word-break: initial;
word-break: unset;

Значения

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

Примеры

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>word-break</title>
  <style>
   .col { 
    background: #f0f0f0; /* Цвет фона */
    width: 180px; /* Ширина блока */
    padding: 10px; /* Поля */
    word-break: break-all; /* Перенос слов */ 
   }
  </style>
 </head>
 <body> 
  <div class="col">
   <p>Cуществительное</p>
   <p>высокопревосходительство</p>
   <p>Одушевленное существительное</p>
   <p>одиннадцатиклассница</p>
   <p>Химическое вещество</p>
   <p>метоксихлордиэтиламинометилбутиламиноакридин</p>
  </div>
 </body>
</html>