word-break¶

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

Демо¶

Текст

Синтаксис¶

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.

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

Применяется ко всем элементам

Спецификации¶

CSS Text Level 3

Поддержка браузерами¶

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

Описание и примеры¶

<!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>