Умный перенос текста в CSS с text-wrap: balance и pretty

Перенос слов в заголовках и текстовых блоках — деталь, на которую пользователи не обращают внимания, когда она хороша, и сразу замечают, когда что-то не так. Одиноко висящее слово в последней строке заголовка, или строки разной длины там, где хотелось симметрии — такое встречается часто. CSS text-wrap предлагает два умных режима для решения этой проблемы.

text-wrap: balance

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

h1, h2, h3 {
  text-wrap: balance;
}

Без balance браузер переносит как можно позже — получается длинная первая строка и короткая последняя. С balance строки выравниваются. Результат выглядит аккуратнее и профессиональнее.

Важное ограничение: balance работает только для блоков длиной не более шести строк. Для длинных текстов браузер игнорирует это значение — иначе алгоритм был бы слишком медленным.

text-wrap: pretty

Режим pretty работает иначе: он решает проблему «висячей строки» (orphan) — когда последняя строка параграфа содержит всего одно короткое слово. Браузер переносит текст так, чтобы в последней строке оказалось минимум два-три слова.

p {
  text-wrap: pretty;
}

В отличие от balance, pretty работает на любой длине текста. Он медленнее, но применяется к параграфам — там это допустимо.

Попробуйте сами

text-wrap: wrap и nowrap

Для полноты картины: CSS text-wrap — это сокращённое свойство, которое также принимает привычные значения wrap (перенос разрешён, по умолчанию) и nowrap (перенос запрещён). Старое свойство white-space: nowrap теперь дублируется через text-wrap: nowrap.

Когда использовать что

balance — для заголовков, тегов, кнопок, коротких подписей. Улучшает визуальный ритм там, где важна симметрия.

pretty — для длинных параграфов, где нужно избежать одиноких слов в конце. Улучшает читабельность, не влияет на общий вид блока.

Поддержка браузерами

text-wrap: balance появился в Chrome 114, Firefox 121, Safari 17.4. text-wrap: pretty — чуть позже: Chrome 117, Firefox 122. В целом поддержка достаточная для использования как прогрессивного улучшения.

Что запомнить

text-wrap: balance выравнивает длину строк в заголовках, text-wrap: pretty убирает «висячие» одиночные слова в конце параграфов. Оба значения работают как прогрессивное улучшение — в браузерах без поддержки текст просто переносится стандартно.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.