CSS свойство hyphens

Свойство hyphens определяет, как должен осуществляться перенос слов в тексте.

Свойство hyphens имеет три значения: none, manual, auto. С помощью этих значений можно избегать переноса или разрешать перенос, или же разрешать только при наличии некоторых символов.

Расстановка переносов работает только в случае, если указан атрибут span, так как переносы отражают специфику языка, и каждый язык имеет свои правила расстановки переноса.

Правила расстановки переноса не сформулированы однозначным образом в спецификации, поэтому расстановка переноса различается в зависимости от браузера.

Значение по умолчанию	manual
Применяется	Ко всем элементам.
Наследуется	Да
Анимируемое	Нет
Версия	CSS3
DOM синтаксис	Object.style.hyphens = "none";

Синтаксис

hyphens: none | manual | auto | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p { 
      width: 55px;
      border: 1px solid #666;
      }
      p.none {
      -webkit-hyphens: none;
      -ms-hyphens: none;
      hyphens: none;
      }
      p.manual {
      -webkit-hyphens: manual;
      -ms-hyphens: manual;
      hyphens: manual;
      }
      p.auto {
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства hyphens</h2>
    <h3>none</h3>
    <p class="none">An extreme&shy;ly lengthy sentence</p>
    <h3>manual</h3>
    <p class="manual">An extreme&shy;ly lengthy sentence</p>
    <h3>auto</h3>
    <p class="auto">An extreme&shy;ly lengthy sentence</p>
  </body>
</html>

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

В вышеприведенном примере применены все три значения.

Для максимальной совместимости браузера могут быть использованы расширения, например, -webkit- для Safari.

Значения

Значение	Описание
none	Слова не переносятся даже при наличии точек прерывания строки..
manual	Слова разбиты только для переноса строк, когда имеется возможность разрыва строки внутри слова. Слова переносятся с помощью использования &hyphen или . Значение по умолчанию.
auto	Браузер автоматически переносит слова в cоответствующих точках переноса. Алгоритм сам решает, где переносить слова. Реакция значения auto зависит от языка.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.