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

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

chrome edge firefox safari opera
55.0 partial 12.0 -ms- 43.0+
6 - 42 -moz-
5.1 -webkit- 42.0 partial

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

Какие значения могут быть у CSS свойства 'hyphens'?
Считаете ли это полезным?