word-wrap CSS

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

Первоначально свойство было нестандартным и безпрефиксным расширением Microsoft, и было реализовано большинством браузеров с тем же именем. С тех пор свойство было переименовано в overflow-wrap, а word-wrap стало псевдонимом.

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

normal

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

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

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

object.style.wordWrap

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

Синтаксис

/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;

/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;

Значения

  • normal — Строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью <br>).
  • break-word — Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока.

Примеры

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