word-break CSS

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

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

normal

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

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

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

object.style.wordBreak

Объект JavaScript:
`object.style.wordBreak`
Спецификации:
Спецификации:
* [CSS Text Level 3](http://dev.w3.org/csswg/css3-text/#word-break)
Поддержка браузерами:

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

Поддержка браузерами:
<p class="ciu_embed" data-feature="word-break" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=word-break">Can I Use word-break?</a> Data on support for the word-break feature across the major browsers from caniuse.com. </p>

Синтаксис

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

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

Синтаксис

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

Примеры

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

Содержание

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

    В начало