Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

word-wrap

Свойство CSS word-wrap позволяет переносить (разбивать) слова на несколько строк, если они не помещаются в ширину строки элемента. Это бывает необходимо в тех случаях, когда в тексте попадаются длинные слова, а ширина элемента сравнительно небольшая, что может быть актуально, например, для небольших чатов.

Для создания переносов в длинных словах также можно использовать спецсимвол HTML — «мягкий» дефис (­).

Тип свойства

Назначение: текст.

Применяется: ко всем элементам.

Наследуется: да.

Значения

Значением свойства word-wrap является одно из ключевых слов разрешающих или запрещающих перенос слов в тексте.

  • normal — происходит перенос только между словами в местах пробелов, как обычно.
  • break-word — браузеру разрешается разбивать слова на несколько строк, если целиком в строку они не помещаются.

Процентная запись: не существует.

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

Синтаксис

word-wrap: normal | break-word

Пример CSS: использование word-wrap

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство word-wrap</title>
  <style type="text/css">
   p {
    width: 250px; /* ширина параграфа */
    border: 2px #ffcc00 solid; /* стили рамки */
    font-size: 200%; /* размер шрифта */
    word-wrap: break-word; /* перенос слов разрешен */
   }
  </style>
 </head>
 <body>
  <p>Восьмидесятивосьмимиллиметровое зенитное орудие.</p>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS word-wrap.

Использование свойства CSS word-wrap

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетНетНетДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и вышеДо 3.63.6 и вышеДо 10.510.5 и выше3.1 и выше
Поддержка:ДаДаНетДаНетДаДа
CSS по алфавиту
CSS по назначению