CSS свойство word-wrap

❮ Назад Вперед ❯

Свойство word-wrap определяет, переносить или нет длинные слова, чтобы они поместились в контейнере. Данное свойство позволяет перенос неразрывных слов.

Word-wrap имеет эффект, когда свойство white-space позволяет перенос.

word-wrap

В спецификации CSS3 свойство word-wrap имеет название overflow-wrap.

Значение по умолчанию	normal
Применяется	Ко всем элементам.
Наследуется	Да
Анимируемое	Нет
Версия	CSS3
DOM синтаксис	object.style.wordWrap = "break-word";

Синтаксис

word-wrap: normal | break-word | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      width: 120px; 
      border: 1px solid #666;
      word-wrap: normal;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства word-wrap</h2>
    <div> Lorem Ipsum это<strong>тексттексттексттексттекст</strong> рыба", часто используемый в печати и<strong>вэб-дизайневэб-дизайневэб-дизайне</strong>.</div>
  </body>
</html>

Попробуйте сами!

Пример со значением "break-word":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      width: 120px; 
      border: 1px solid #666;
      word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства word-wrap</h2>
    <div> Lorem Ipsum is <strong>тексттексттексттексттекст</strong> рыба", часто используемый в печати <strong>вэб-дизайневэб-дизайневэб-дизайне</strong>.</div>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
normal	Переносит слова в допустимых точках. Значение по умолчанию.
break-words	Переносит неразрывные слова.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.


23.0+	49.0+	6.1+	12.1+

23.0+

49.0+

6.1+

12.1+

CSS свойство word-wrap

Синтаксис

Пример

Пример

Значения

Поддержка браузера

Практикуйте свои знания