text-wrap: балансировка строк заголовка
Text-wrap управляет переносом и выбором разбиения строк текста. Значение balance может сделать короткий многострочный заголовок визуально ровнее без ручных br.
Назначение
Text-wrap управляет переносом и выбором разбиения строк текста. Значение balance может сделать короткий многострочный заголовок визуально ровнее без ручных br.
Как это работает
Ограничьте ширину заголовка и задайте text-wrap:balance. Браузер выбирает разбиение с учётом своего алгоритма. Для длинного основного текста такое решение не обязательно полезно; поведение разных значений и поддержка отличаются.
Пример
<style>.balanced-title{max-width:22ch;text-wrap:balance;font-size:2rem;line-height:1.15}</style>
<h2 class="balanced-title">Как подготовить учебную страницу к первой публикации</h2>Что должно получиться
В поддерживающем браузере строки заголовка могут стать ближе по длине. При неподдерживаемом значении остаётся обычный перенос. Исходный текст не содержит принудительного разрыва.
Граница применения и частая ошибка
Не рассчитывайте на точное одинаковое число строк при любом шрифте, языке и ширине. Balance не решает переполнение одного неразрывного слова. Ручные br ради конкретного скриншота часто ухудшают другие размеры экрана.
Самостоятельная проверка
Сравните balance и wrap на нескольких ширинах. Измените шрифт и длину заголовка. Проверьте, что без поддержки улучшения текст остаётся читаемым и не выходит за границы страницы.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.