CSS text-wrap: balance: ровные строки заголовка

text-wrap: balance перераспределяет слова между строками так, чтобы последняя строка не оставалась с одним словом. Свойство применяют к заголовкам и коротким подписям, где важна ровная форма блока. Для длинных абзацев оно не подходит: браузер ограничивает число анализируемых строк, чтобы не тормозить раскладку.

Выровнять заголовки по ширине

h1,
h2 {
    max-inline-size: 24ch;
    text-wrap: balance;
}

.card__title {
    text-wrap: balance;
}

max-inline-size задаёт комфортную длину строки, а balance подбирает переносы внутри неё. Без ограничения ширины свойство почти не изменит вид: строке и так хватает места. В Chrome и Edge балансировка работает примерно до шести строк; если текст длиннее, браузер отдаёт обычный перенос.

Свойство поддерживается в Chrome 114+, Safari 17.5+ и Firefox 121+. В старом браузере объявление просто игнорируется, поэтому отдельный fallback не нужен. Если от балансировки зависят отступы или высота блока, проверьте их в @supports (text-wrap: balance) и задайте запасной вариант.

Не путать с text-wrap: pretty

.article p {
    text-wrap: pretty;
}

pretty предназначен для абзацев: он улучшает последнюю строку и старается не оставлять короткие «висячие» слова, но не выравнивает весь блок. Поддержка у него уже, чем у balance, поэтому применяйте его как улучшение. Оба значения не переносят слова по слогам и не заменяют hyphens.

text-wrap — сокращение для text-wrap-mode и text-wrap-style. Не применяйте balance к каждому абзацу и к элементам с часто меняющимся текстом: пересчёт раскладки стоит времени. Для таблиц, кода и длинных списков оставляйте обычный перенос, иначе предсказуемость ширины колонок ухудшится.

Документация: MDN text-wrap, Can I use.