Frontend Разработка | JavaScript & Верстка сайтов. HTML, CSS и React. Уроки для Фронтенд Developer. JS, Vue и Web технологии. IT Карьера, Курсы и Coding.
Идеальные заголовки без JS: text-wrap: balance
Дизайнеры ненавидят «висячие» слова. Когда длинный заголовок переносится так, что на второй строке остается одно короткое слово - это боль.
Раньше мы решали это костылями:
1. Вставляли неразрывные пробелы  .
2. Ставили <br> (ломая адаптив).
3. Тянули JS-библиотеки типа React-Text-Balancer.
В CSS Text Module Level 4 появилась нативная поддержка балансировки текста.
Как это работает:
h1 {
/* Браузер сам перенесет слова так, чтобы строки были примерно равны */
text-wrap: balance;
}
Разница наглядно:
❌ Обычный перенос (wrap):
Супер важный и очень длинный
заголовок
✅ Сбалансированный (balance):
Супер важный и очень
длинный заголовок
🧠 Senior-нюанс: balance vs pretty
1. text-wrap: balance
• Для чего: Заголовки, цитаты (короткий текст).
• Как работает: Пытается сделать все строки одинаковой ширины.
2. text-wrap: pretty
• Для чего: Основной текст (Body), длинные статьи.
• Как работает: Оптимизирует только конец абзаца, чтобы не оставлять «сироту» (одно слово) на последней строке.
• Производительность: Быстро, можно использовать везде.
Итог: В дизайн-системе для h1-h6 ставим balance, для p - pretty. И удаляем JS-хелперы для типографики.
👉 @frontend_1 Если у вас установлено приложение,
вы можете сразу перейти в канал