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 Значение элемента наследуется от родительского элемента.





Похожие статьи