CSS-свойство `hyphens`

hyphens — это свойство CSS, которое определяет, как следует переносить слова при переносе текста на несколько строк.

Попробуйте

hyphens: none;

hyphens: manual;

hyphens: auto;

<section id="default-example">
  <p id="example-element">An extra­ordinarily long English word!</p>
</section>

#example-element {
  border: 2px dashed #999999;
  font-size: 1.5rem;
  text-align: left;
  width: 7rem;
}

Пример текста «Чрезвычайно длинное английское слово!» содержит невидимый символ ­ (мягкий дефис): An extra­ordinarily long English word!. Этот символ указывает возможное место вставки дефиса, когда указано значение hyphens: manual;.

Синтаксис

/* Keyword values */
hyphens: none;
hyphens: manual;
hyphens: auto;

/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: revert;
hyphens: revert-layer;
hyphens: unset;

Значения

Это свойство задаётся одним из следующих ключевых слов:

none

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

manual

Значение по умолчанию. Слова переносятся только в тех местах, где символы внутри слова указывают возможность переноса строки. Подробнее см. раздел Указание возможных мест переноса строки ниже.

auto

Браузер может автоматически переносить слова в подходящих местах переноса, руководствуясь выбранными им правилами. Однако при наличии указанные места возможного переноса строки (см. раздел Указание возможных мест переноса строки ниже) имеют приоритет над автоматически выбранными местами переноса.

Описание

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

Правила переноса зависят от языка. В HTML язык определяется атрибутом lang. Браузеры выполняют перенос слов только при наличии этого атрибута и соответствующего словаря переносов. Поведение настройки auto зависит от того, правильно ли указан язык для выбора соответствующих правил переноса.

В XML необходимо использовать атрибут xml:lang. Спецификация не определяет правила переноса слов в содержимом XML, поэтому точное поведение при переносе может различаться в разных браузерах.

Свойство hyphenate-character позволяет указать символ переноса, который будет использоваться в конце строки вместо символа переноса, заданного по умолчанию для языка.

При применении word-break: break-all дефисы не отображаются, даже если слово переносится в месте переноса. При применении text-wrap-mode: nowrap перенос строк не выполняется, поэтому дефисы не появятся.

Указание возможных мест переноса строки

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

U+2010 (HYPHEN)

Символ «жёсткого» дефиса указывает видимое место возможного переноса строки. Даже если строка фактически не переносится в этом месте, дефис всё равно отображается.

U+00AD (SHY)

Невидимый «мягкий» дефис. Этот символ не отображается; вместо этого он отмечает место, в котором браузер должен перенести слово, если это необходимо. В HTML для вставки мягкого дефиса используйте ­.

Формальное определение

Формальный синтаксис

hyphens = 
  none |
  manual |
  auto

Примеры

Простой пример

В этом примере показаны три значения свойства hyphens.

HTML

Мы добавим три элемента <dd> с одинаковым текстом, но с тремя разными классами.

<dl>
  <dt><code>none</code>: no hyphen; overflow if needed</dt>
  <dd lang="en" class="none">An extreme&shy;ly long English word</dd>
  <dt>
    <code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)
  </dt>
  <dd lang="en" class="manual">An extreme&shy;ly long English word</dd>
  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
  <dd lang="en" class="auto">An extreme&shy;ly long English word</dd>
</dl>

CSS

Для каждого из трёх классов задано своё значение hyphens.

dd {
  width: 55px;
  border: 1px solid black;
}
dd.none {
  hyphens: none;
}
dd.manual {
  hyphens: manual;
}
dd.auto {
  hyphens: auto;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• content
• overflow-wrap (ранее word-wrap)
• word-break
• Руководство по переносу и разрыву текста
• Модуль CSS Text