Ручные
и <br> для борьбы с висячими строками — наследие эпохи, когда CSS-типографика была роскошью. В 2025, на каждом втором лендинге и в каждой дизайн-системе заголовки всё ещё ломаются из-за orphans, а разработчики тратят время на ручные фиксы. Ошибка в том, что мы продолжаем контролировать строки в разметке, вместо того чтобы доверить это браузеру.balance: аккуратные заголовки без лишних хитростей
Значение
text-wrap: balance подгоняет строки в заголовке так, чтобы они были примерно одинаковой длины. Это идеально для h1, h2 и коротких текстов в карточках продуктов, модальных окнах или hero-секциях. Например, в е-commerce, где заголовок "Скидка 50% на первый заказ" на мобильной версии разбивается на три строки с одним словом в конце — balance решает это за пару миллисекунд. Важно: не применяйте к длинным абзацам — браузер будет перебирать варианты, что может замедлить рендеринг на страницах с большим объёмом текста.pretty: абзацы без сирот и некрасивых переносов
text-wrap: pretty скрывает висячие строки (orphans) и улучшает визуальную привлекательность переносов. Это спасение для статей, описаний товаров и любых длинных текстов. Типичная ошибка: думать, что это волшебная палочка для всего текста. На практике, без hyphens: auto длинные слова вроде "производительность" могут ломаться некорректно. Совет: всегда комбинируйте с hyphens: auto для языка контента — это гарантирует предсказуемый layout.production-совет: trade-off между красотой и производительностью
В реальных проектах (SaaS-панели, медиа-сайты)
balance на заголовках с 3–4 строками практически незаметен по производительности. Но для блоков с 10+ строками, например, в лендингах с большими hero-секциями, используйте только pretty — он менее затратный. Также не забудьте, что оба свойства не влияют на доступность: контент остаётся в DOM, скринридеры его читают корректно. Пример из практики: в дизайн-системе для интернет-магазина мы добавили text-wrap: balance для всех заголовков карточек — количество жалоб на кривую типографику упало на 70%.h1, h2, h3, h4 { text-wrap: balance; hyphens: auto; }
p, li { text-wrap: pretty; hyphens: auto; }Вывод:
text-wrap: pretty и balance заменяют ручные костыли, делая типографику предсказуемой, доступной и стабильной — это обязательная практика для любого серьёзного проекта с текстовым контентом.