Прощай, «висячее» слово: Укрощаем заголовки с помощью text-wrap: balance и pretty
Признайся, сколько раз ты открывал свежесверстанную страницу на мобилке и видел ЭТО? Идеальный заголовок, крутой шрифт, выверенный межстрочный интервал и… одно-единственное слово, сиротливо висящее на последней строке. Дизайнер в ярости, заказчик недоволен, а ты судорожно пытаешься подогнать font-size или ширину контейнера. Эта проблема «вдов» и «сирот» преследовала веб-разработку десятилетиями.
Сегодня мы наконец-то получили инструменты, которые решают эту боль на уровне браузерного движка. Забудь про костыли, сейчас разберемся, как заставить текст ложиться красиво без лишних телодвижений.
Как мы страдали раньше
До появления современных свойств в нашем арсенале был целый цирк с конями. Самый популярный метод — ручная расстановка неразрывных пробелов между последними двумя словами. Но стоит изменить размер шрифта или ширину экрана, и твой «костыль» делает только хуже.
Особо отчаянные использовали JavaScript-библиотеки вроде fitty или balance-text. Они высчитывали ширину текста, гоняли циклы и принудительно расставляли переносы. Это било по производительности и вызывало неприятные скачки контента (Layout Shift) при загрузке. Чтобы минимизировать такие проблемы, приходилось серьезно вкладываться в оптимизацию производительности CSS, но фундаментально проблему это не решало.
Как делать правильно в 2026 году
В современном стандарте CSS у нас есть свойство text-wrap, которое принимает два спасительных значения: balance и pretty. Работают они по-разному, и важно их не путать.
text-wrap: balance — это маст-хэв для коротких заголовков. Браузер автоматически просчитывает количество слов и делит их так, чтобы строки были примерно одинаковой длины. Это выглядит эстетично и гармонично. Но помни: движку приходится делать много вычислений, поэтому браузеры обычно ограничивают работу balance первыми шестью строками текста.
text-wrap: pretty — более тонкий инструмент для длинных абзацев. Он не пытается сделать строки равными, его задача — просто не допустить «висячего» слова в конце. Он анализирует последние строки и, если нужно, перекидывает еще одно слово вниз, чтобы финал выглядел аккуратно. В сочетании с динамическим изменением размера через функцию clamp() это дает идеальный результат на любых устройствах.
Готовый сниппет кода
Держи готовый рецепт, который можно просто скопировать в свой проект. Здесь мы применяем балансировку к заголовкам и «красивый» перенос к основному тексту.
/* Идеально для заголовков H1-H3 */
.headline {
text-wrap: balance;
font-size: clamp(2rem, 5vw, 4rem);
line-height: 1.2;
}
/* Для длинных текстовых блоков и лидов */
.description {
text-wrap: pretty;
max-width: 60ch; /* Ограничиваем длину строки для читаемости */
}
Частая ошибка новичков
Главный факап — пихать text-wrap: balance везде, где есть текст. Во-первых, это бесполезно для длинных простыней текста, так как алгоритм просто перестанет работать после определенного лимита строк. Во-вторых, это удар по производительности. Каждый раз, когда меняется ширина вьюпорта, браузер должен пересчитывать баланс для каждого такого элемента.
Используй balance только для тех элементов, которые ты реально «видишь» как заголовки. Для всего остального есть pretty. И не забывай, что эти свойства работают только тогда, когда у текста есть куда переноситься (то есть задана ширина контейнера или он ограничен соседними флексами/гридами).
🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!