CSS свойство hyphens

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

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

INFO

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

Начальное значение	none
Применяется ко	Всем элементам.
Наследуется	Да.
Анимируемое	Нет.
Версия	CSS3
Синтаксис DOM	Object.style.hyphens = "none";

Синтаксис

Синтаксис свойства CSS hyphens

css

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

Пример свойства hyphens:

Пример использования свойства CSS hyphens со значениями none, manual и auto

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        width: 55px;
        border: 1px solid #666;
      }
      p.none {
        hyphens: none;
      }
      p.manual {
        hyphens: manual;
      }
      p.auto {
        hyphens: auto;
      }
    </style>
  </head>
  <body>
    <h2>Hyphens property example</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" lang="en">An extreme&shy;ly lengthy sentence</p>
  </body>
</html>

Try it Yourself »

Результат

Свойство CSS hyphens

В данном примере использованы все три значения, чтобы наглядно показать разницу.

INFO

Для современных браузеров префиксы больше не требуются.

Возможности переноса строк

С помощью двух приведенных ниже символов Unicode мы можем вручную задать потенциальные точки переноса внутри текста:

U+00AD (SHY/Мягкий дефис)

Этот символ отображается невидимо. Он указывает место, где браузер должен разорвать слово, если требуется перенос. Для вставки SHY используйте .

U+2010 (HYPHEN/Жесткий дефис)

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

Значения

Значение	Описание
none	Переносы запрещены. Слова не разрываются при переносе строк, даже если символы указывают на такие точки.
manual	Слова разрываются только для переноса строк там, где внутри слова есть возможности для переноса. Слова переносятся только на &hyphen; или &shy.
auto	Браузер автоматически разрывает слова в подходящих точках переноса. Слова переносятся там, где это решает алгоритм. Поведение значения `auto` зависит от языка.
initial	Заставляет свойство использовать значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Какова цель свойства 'hyphens' в CSS?

Оно используется для настройки переноса слов для улучшения макета абзацев.Оно позволяет изменить цвет текста.Оно используется для указания размера границ.Оно управляет переносами строк внутри слов.Оно определяет отступы между элементами.

CSS свойство hyphens ​

Синтаксис ​

Пример свойства hyphens: ​

Результат ​

Возможности переноса строк ​

U+00AD (SHY/Мягкий дефис) ​

U+2010 (HYPHEN/Жесткий дефис) ​

Значения ​

Практика ​