hyphenate-limit-chars

/* 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;

Свойство hyphenate-limit-chars принимает от 1 до 3 значений, которые могут быть числовыми или 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}  

В этом примере у нас есть четыре блока, каждый из которых содержит одинаковый текст. Для сравнения, первый блок показывает перенос, применяемый браузером по умолчанию. Следующие три блока демонстрируют результат ограничения поведения браузера по умолчанию с помощью различных 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 #999;
  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. В результате "сопоставление" не перенесено во втором блоке, так как оно состоит всего из 13 символов.

В третьем блоке мы ограничили браузер, требуя включения как минимум 9 символов перед дефисом, установив hyphenate-limit-chars: 5 9 2. Эффект заключается в том, что "признание" теперь перенесено как "призна-ние" вместо значения по умолчанию "признан-ие", показанного в первом блоке.

Обратите внимание, что браузер не должен включать ровно 9 символов перед дефисом: до тех пор, пока выполняются ограничения, заданные в hyphenate-limit-chars, браузер может разбить слово в том месте, которое он считает лучшим. Таким образом, в этом случае, например, он выбирает "призна-ние" вместо менее читаемого "признан-ие".

В четвёртом блоке мы заставляем браузер включать как минимум 7 символов после дефиса, установив hyphenate-limit-chars: 5 2 7. Эффект заключается в том, что "сопоставление" перенесено как "сопо-ставление" вместо значения по умолчанию "сопоста-вление".

• hyphens
• Модуль CSS Text