CSS-свойство `hyphenate-character`

CSS-свойство hyphenate-character CSS задаёт символ (или строку), используемый в конце строки перед переносом слова.

Автоматические и мягкие дефисы отображаются в соответствии со значением свойства hyphenate-character.

Попробуйте

hyphenate-character: auto;

hyphenate-character: "=";

hyphenate-character: "—";

<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;
  hyphens: auto;
}

Синтаксис

hyphenate-character: <string>;
hyphenate-character: auto;

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

Значения

<string>

<string>, используемая в конце строки перед переносом слова. Если используется слишком много символов, пользовательский агент может усечь это значение.

auto

Пользовательский агент выбирает подходящую строку на основе типографских правил языка содержимого. Это значение свойства по умолчанию; его нужно задавать явно только для переопределения другого унаследованного значения.

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

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

hyphenate-character = 
  auto |
  <string>

Примеры

В этом примере показаны два одинаковых блока текста, для которых установлено свойство hyphens, чтобы слова переносились везде, где это необходимо, а также в местах мягкого переноса (созданных с помощью ­). Для первого блока значение символа переноса изменено на знак равенства (=). Для второго блока свойство hyphenate-character не задано. В браузерах с поддержкой этого свойства это равнозначно hyphenate-character: auto.

HTML

<dl>
  <dt><code>hyphenate-character: "="</code></dt>
  <dd id="string" lang="en">Superc&shy;alifragilisticexpialidocious</dd>
  <dt><code>hyphenate-character is not set</code></dt>
  <dd lang="en">Superc&shy;alifragilisticexpialidocious</dd>
</dl>

CSS

dd {
  width: 90px;
  border: 1px solid black;
  hyphens: auto;
}

dd#string {
  -webkit-hyphenate-character: "=";
  hyphenate-character: "=";
}

Результат

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

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

См. также

• Связанные свойства CSS: hyphens, overflow-wrap.