Эстетика текста без «костылей»: магия text-wrap
Слушай, помнишь это чувство, когда ты вылизал дизайн до пикселя, отправил заказчику, а он открывает сайт на своем планшете, и там заголовок разрывается так, что одно короткое слово сиротливо висит на второй строке? Этот «висяк» (или orphan, как говорят типографы) портит всё впечатление от интерфейса. Раньше мы выкручивались как могли, но сегодня у нас есть инструменты, которые решают это на уровне браузерного движка за одну строчку кода.
Как мы страдали раньше
Вспомни эти времена. Чтобы заголовок выглядел прилично, мы пихали между последними двумя словами. Но стоило пользователю изменить размер шрифта или если ты использовал адаптивную типографику с помощью функции clamp(), вся эта конструкция моментально разваливалась. Еще были умельцы, которые ставили <br> через медиа-запросы. Представь: десяток медиа-запросов только ради переноса текста в одном заголовке. Это был настоящий ад поддержки и тонны лишнего кода.
Как делать правильно в 2026 году
Теперь за нас думает браузер. У свойства text-wrap появилось две киллер-фичи: balance и pretty. Это не просто «переносилка», а умные алгоритмы, которые анализируют контекст.
- text-wrap: balance; — это маст-хэв для заголовков. Браузер сканирует текст, прикидывает количество строк и делает их максимально равными по длине. Больше никаких «лесенок», где первая строка растянута на весь экран, а вторая состоит из пары букв. Визуальный вес блока становится гармоничным.
- text-wrap: pretty; — алгоритм похитрее, созданный специально для длинных абзацев. Он не пытается уравновесить все строки (это было бы слишком тяжело для процессора), но он железно следит, чтобы в последней строке не осталось одно одинокое слово. Он перераспределяет текст в последних трех строках, чтобы всё выглядело «красиво».
Готовый сниппет кода
/* Идеальный баланс для всех заголовков */
h1, h2, h3, .headline {
text-wrap: balance;
max-width: 800px; /* Ограничиваем ширину для лучшего эффекта */
}
/* Избавляемся от "одиноких слов" в основном тексте */
p, .content-text {
text-wrap: pretty;
}
Частая ошибка новичков
Главный факап — это вешать text-wrap: balance вообще на весь текст страницы, включая огромные статьи. Запомни: алгоритм балансировки ресурсозатратный. Браузеру нужно сделать несколько итераций просчета, прежде чем окончательно отрисовать блок. Если ты применишь это к лонгриду на 10 тысяч знаков, страница может ощутимо «затупить» при ресайзе окна. Если тебя всерьез заботит оптимизация производительности CSS, то используй balance только для коротких фрагментов (до 4-6 строк), а для всего остального — pretty.
🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!