Новое свойство CSS для красивого выравнивания текста

Мало кто из разработчиков, верстальщиков и прочих сборщиков проектов в визуальных редакторах не материл дизайнеров, которые рисуют выравнивание двухстрочных заголовков таким образом, что обе строки являются примерно одинаковыми по ширине. Уж кому как не нам известно, что сделать такое означает жестко накостылить с шириной заголовка, или боковыми отступами, или вставить, прости господи, в нужном месте <br>.

Потому что без этих манипуляций можно получить в заголовке некрасивое одинокое слово в нижней строке.

А с этими манипуляциями мы получим что-то вроде такого

Возможно не самый удачный пример, но суть должна быть понятна. Красота на втором скрине обеспечена, во-первых, центровкой заголовка, а, во-вторых, тем, что мы имеем плюс-минус одинаковые по длине две строки сверху и снизу, если сделать скидку на разную длину слов. И если слепить такое в Фигме достаточно просто, то при адаптивной верстке придется помучаться. К счастью, в CSS уже появилось нужное свойство для решение этой проблемки.

А как раньше то было?

Чтобы заголовок или небольшой текст красиво обрезался и переносился на другую строку приходится прибегать к некоторым неудобным хитростям. Например, ограничивать ширину контейнера где находится этот текст, или управлять шириной самого текста.

h2 {
    max-width: 65%;
    margin: 0 auto;
    text-align: center;
}

Можно еще бабахнуть паддинги слева и справа.

h2 {
    padding: 0 150px;
    text-align: center;
}

Такие решения приводят к тому, что приходиться убирать лишние отступы и ограничения по ширине на различных экранах, добавляя себе работу, а сайту лишние строки кода. Кроме того, владелец сайта может захотеть изменить текст, увеличив или уменьшим количество слов/знаков в нем, из-за чего можно получить полетевший к праотцам макет.

Еще более худшим решением, на мой взгляд, является добавление тега <br> в текст, после которого остальная его часть переносится на новую строку. Или оборачивание переносимого текста в <span> с добавлением ему display: block.

<h2>Зачем я работаю <br> с Ghost CMS</h2>
<h2>Зачем я работаю <span>с Ghost CMS<span></h2>

После такого все-равно приходится зачастую лезть в CSS и в медиа-запросах удалять лишнее или переопределять значения свойств, так как на мобильных экранах при меньшем размере шрифта все эти переносы могут быть не актуальны.

h2 > br {
    display: block;
}

h2 > span {
    display: block;
}

@media(max-width: 992px) {
    h2 > br {
        display: none;
    }

    h2 > span {
        display: inline;
    }
}

Но совсем скоро о подобных методах работы можно будет забыть. Свойство text-wrap со значением balance идет нам на помощь.

Балансировка текста

Если коротко, то вот так будет выглядеть код:

h2 {
    text-wrap: balance;
}

Мы по-прежнему можем ограничить ширину текста при помощи max-width и отцентровать его с помощью text-align, но больше никаких отступов и внутренних тегов не понадобиться. Браузер автоматически подсчитает количество слов и разделит их поровну между строками.

Что важно, так это то, что ширина блока заголовка или текста останется такой же какой вы ее задали, слова просто красиво перенесутся на другую строку. Тоже самое будет происходить и на небольших экранах, или когда контейнер узкий, просто текст из двухстрочного станет,к примеру, трёхстрочным, но изо всех сил попытается сохранить свою красоту.

Куда это девать?

Пример с заголовками, как мне кажется, наиболее примечательный и актуальный. Вряд ли верстальщик навсегда избавится от необходимости использования принудительных переносов строк, потому что пути дизайнерские неисповедимы, но облегчение работы должно стать заметнее.

Переносы текста с помощью text-wrap: balance также могут пригодиться там, где контейнер весьма ограничен по ширине - это всевозможные тултипы, всплывающие подсказки, модальные окна, аккордеоны и всякое такое. Например, моя «попрошайка» на сайте может выглядеть так:

А может так:

Правда этот последний скрин - неправда. Я просто подправил его для красоты, чтобы замаскировать проблему. Ниже о ней и о некоторых других подробнее.

Подводные камни

Несмотря на такую крутую функциональность text-wrap: balance нужно обязательно сказать про все плохое, что имеется у этого решения. Во-первых, в настоящее время эта функция ограничена только четырьмя строками. Это означает, что ее можно использовать в основном для заголовков или коротких абзацев.

Во-вторых, как уже было сказано выше, данное решение не может контролировать ширину элемента, что в некоторых случаях может привести к большому количеству пустого места в блоке.

Моя «попрошайка» на самом деле в случае применения text-wrap: balance будет выглядеть так:

Ширина блока, обведенного рамкой, остается неизменной, так как «балансировка переносов» не влияет на этот параметр. Поэтому в подобных случаях лучшим решением является «жесткое» ограничение ширины элемента и его подгонка под другие экраны, если это необходимо.

Если бы можно было сочетать героя данной статьи с width: fit-content;, то это бы решило проблему. Тогда блок или контейнер принял бы ширину текста и пустого места, от которого повесился бы последний дизайнер, не было.

h2 {
    text-wrap: balance;
    width: fit-content;
}

Но так не работает. Да и само свойство text-wrap: balance поддерживается браузерами пока слабовато. Тем не менее, несмотря на все недостатки, в качестве решения для красивых переносов заголовков или небольшого текста, находящегося вне видимых рамок или блоков, использовать эту функцию можно. По крайней мере для своих новых проектов ее стоит попробовать.