word-wrap CSS

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

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

Свойство **`word-wrap`** указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область. Первоначально свойство было нестандартным и безпрефиксным расширением Microsoft, и было реализовано большинством браузеров с тем же именем. С тех пор свойство было переименовано в [overflow-wrap](/css/overflow-wrap/), а `word-wrap` стало псевдонимом.
Значение по умолчанию:

normal

Значение по умолчанию:
`normal`
Наследуется:
Да
Применяется:

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

Применяется:
Ко всем элементам
Анимируется:
Нет
Объект JavaScript:

object.style.wordWrap

Объект JavaScript:
`object.style.wordWrap`
Спецификации:
Спецификации:
* [CSS Text Level 3](https://drafts.csswg.org/css-text-3/#overflow-wrap-property)

Синтаксис

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

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

Синтаксис

/* Keyword values */ overflow-wrap: normal; overflow-wrap: break-word; /* Global values */ overflow-wrap: inherit; overflow-wrap: initial; overflow-wrap: unset;

Значения

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

Значения

* `normal` -- Строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью [`<br>`](/html/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>

Примеры

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

Содержание

  • Синтаксис
      /* Keyword values */ overflow-wrap: normal; overflow-wrap: break-word; /* Global values */ overflow-wrap: inherit; overflow-wrap: initial; overflow-wrap: unset;
  • Значения
    • Примеры
        <!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>

    В начало