Свойство CSS `hyphenate-limit-chars`

Свойство hyphenate-limit-chars CSS задаёт минимальную длину слова, при которой разрешён перенос, а также минимальное количество символов до и после дефиса.

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

Синтаксис

/* Numeric values */
hyphenate-limit-chars: 10 4 4;
hyphenate-limit-chars: 10 4;
hyphenate-limit-chars: 10;

/* Keyword values */
hyphenate-limit-chars: auto auto auto;
hyphenate-limit-chars: auto auto;
hyphenate-limit-chars: auto;

/* Mix of numeric and keyword values */
hyphenate-limit-chars: 10 auto 4;
hyphenate-limit-chars: 10 auto;
hyphenate-limit-chars: auto 3;

/* Global values */
hyphenate-limit-chars: inherit;
hyphenate-limit-chars: initial;
hyphenate-limit-chars: revert;
hyphenate-limit-chars: revert-layer;
hyphenate-limit-chars: unset;

Значения

Для этого свойства задаётся от одного до трёх числовых значений или значений auto:

<number> <number> <number>

Первое значение — минимальная длина слова, при которой разрешён перенос. Второе значение — минимальное количество символов до дефиса. Третье значение — минимальное количество символов после дефиса.

<number> <number>

Первое значение — минимальная длина слова, при которой разрешён перенос. Второе значение — минимальное количество символов до дефиса. Минимальное количество символов после дефиса будет равно второму значению.

<number>

Это значение — минимальная длина слова, при которой разрешён перенос. Минимальное количество символов до и после дефиса будет равно auto.

Если для любого из значений задано auto, пользовательский агент выберет подходящее значение для текущего макета. Если пользовательский агент не сможет вычислить более подходящее значение, будут использоваться следующие значения по умолчанию:

• Минимальная длина слова, при которой разрешён перенос: 5
• Минимальное количество символов до дефиса: 2
• Минимальное количество символов после дефиса: 2

Обратите внимание: если слово слишком короткое, чтобы соответствовать заданным ограничениям, оно не будет переноситься. Например, при значении hyphenate-limit-chars: auto 3 4 слова короче 7 символов никогда не будут переноситься, поскольку невозможно разместить 3 символа до дефиса и 4 символа после него.

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

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

hyphenate-limit-chars = 
  [ auto | <integer> ]{1,3}

<integer> = 
  <number-token>

Примеры

Настройка ограничений переноса

В этом примере показаны четыре блока с одним и тем же текстом. Для сравнения в первом блоке отображаются переносы по умолчанию, применённые браузером. В следующих трёх блоках показан результат ограничения поведения браузера по умолчанию с помощью разных значений hyphenate-limit-chars.

HTML

<div class="container">
  <p id="ex1">juxtaposition and acknowledgement</p>
  <p id="ex2">juxtaposition and acknowledgement</p>
  <p id="ex3">juxtaposition and acknowledgement</p>
  <p id="ex4">juxtaposition and acknowledgement</p>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

p {
  margin: 1rem;
  width: 120px;
  border: 2px dashed #999999;
  font-size: 1.5rem;
  hyphens: auto;
}

#ex2 {
  hyphenate-limit-chars: 14;
}

#ex3 {
  hyphenate-limit-chars: 5 9 2;
}

#ex4 {
  hyphenate-limit-chars: 5 2 7;
}

Результат

В первом блоке мы не задаём hyphenate-limit-chars, позволяя браузеру применить алгоритм по умолчанию. По умолчанию браузер использует значения 5 2 2, если не сможет подобрать более подходящие.

Во втором блоке мы запрещаем браузеру переносить слова, если в них меньше 14 символов, задав hyphenate-limit-chars: 14. Поэтому слово «juxtaposition» во втором блоке не переносится: в нём всего 13 символов.

В третьем блоке мы задаём ограничение: перед дефисом должно быть не менее 9 символов, установив hyphenate-limit-chars: 5 9 2. В результате слово «acknowledgement» переносится как «acknowledge-ment», а не как вариант по умолчанию «acknowl-edgement», показанный в первом блоке.

Обратите внимание: браузер не обязан располагать перед дефисом ровно 9 символов. Если ограничения, заданные в hyphenate-limit-chars, соблюдены, браузер может перенести слово в наиболее подходящем, по его мнению, месте. Поэтому в данном случае он выбирает «acknowledge-ment», а не менее читаемый вариант «acknowled-gement».

В четвёртом блоке мы задаём ограничение: после дефиса должно быть не менее 7 символов, установив hyphenate-limit-chars: 5 2 7. В результате слово «juxtaposition» переносится как «juxta-position», а не как вариант по умолчанию «juxtaposi-tion».

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

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

См. также

• hyphens
• Модуль текста CSS