hyphenate-character

Базовая линия 2023

Новое

С сентября 2023 года эта функция работает на последних устройствах и версиях браузеров. Возможно, она не будет работать на более старых устройствах или браузерах.

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

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

Попробовать

Синтаксис

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

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

Значения

<string>: <string> для использования в конце строки перед разрывом переноса. Пользовательский агент может обрезать это значение, если используется слишком много символов.
auto: Пользовательский агент выбирает подходящую строку в соответствии с типографическими соглашениями языка контента. Это значение по умолчанию и необходимо явно установить, только чтобы переопределить другое унаследованное значение.

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

Начальное значение	`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 Text Module Level 4 # propdef-hyphenate-character

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`hyphenate-character`	1066	10679	98	9215	175.1	10618	98	7214	175	20.01.0	1064.4
`auto`	6	79	98	15	5.1	18	98	14	5	1.0	4.4

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/hyphenate-character