Красивый перенос текста с CSS свойством text-wrap

Сбалансированный текст

Используя text-wrap: balance, можно указать браузеру, чтобы он выровнял (насколько это возможно) несколько строк текста. Посмотрите пример ниже, в котором сравнивается стандартный перенос текста со сбалансированным (работает в Chrome, Edge и Firefox).

See the Pen

Мило. Вручную балансировать строки текста элементами <br> — хлопотно и не очень подходит для отзывчивых макетов. Я также видел, как использовался JavaScript для динамической вставки элементов <br>, но прибегать к JavaScript для переноса текста меня не радует. Позволить браузеру сделать это за нас с помощью одной строки CSS гораздо приятнее.

Заголовки — главный кандидат на перенос с text-wrap: balance, особенно если они выровнены по центру. Сравните эти две версии заголовка, несбалансированную и сбалансированную (опять, работает в Chrome, Edge и Firefox).

See the Pen

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

• CSS свойство text-wrap: pretty

Симпатичный текст

Есть также text-wrap: pretty, указывающий браузеру использовать лучший, но более медленный алгоритм для переноса текста. Он предназначен для использования в основном тексте для улучшения читабельности.

Вероятно, самое популярное преимущество, которое он обеспечивает,— это предотвращение сирот (сирота — это слово в конце абзаца, которое переносится на новую строку, что может выглядеть немного неуклюже). Вот пример (работает в Chrome и Edge).

See the Pen

Обратите внимание, что слово "wanted" в обычной ситуации было бы сиротой, но text-wrap: pretty предотвращает это. Однако здесь происходит нечто большее, чем просто перенос лишнего слова перед сиротой. Видите, как слово "bit" было перенесено на вторую строку? Это алгоритм корректирует несколько строк для улучшения читабельности. Это гораздо лучше, чем пытаться избежать сирот, "склеивая" последние два слова абзаца с помощью  .

Ещё одно преимущество text-wrap: pretty — уменьшение чрезмерного количества знаков переноса. Посмотрите, как это влияет на текст с включёнными переносами слов через hyphens: auto (опять, работает в Chrome и Edge).

p {
  hyphens: auto;
}

p.bottom {
  text-wrap: pretty;
}

See the Pen

Если в конце абзаца есть несколько последовательных строк, заканчивающихся словами с переносом, то text-wrap: pretty подправит их. Это небольшое улучшение читабельности.

Поддержка браузерами

На момент написания статьи (28 января 2024 г.) text-wrap: balance ещё не поддерживается в Safari, а text-wrap: pretty — в Safari и Firefox. Я ожидаю, что со временем появится полная поддержка (она уже в разработке для Safari).

Но самое замечательное, что вы можете спокойно использовать text-wrap в любом случае. Браузеры, которые его не поддерживают, просто проигнорируют его и перенесут текст обычным образом, так что вам не будет хуже.

Производительность

Использование CSS свойства text-wrap с balance или pretty заставляет алгоритмы вёрстки выполнять больше работы, что может привести к увеличению времени рендеринга.

Для text-wrap: balance браузеры предотвращают это, выполняя работу только в том случае, если текст не превышает определённого количества строк. В настоящее время это ограничение составляет шесть строк для Chrome и Edge и десять строк для Firefox. Если текст выходит за эти пределы, text-wrap: balance игнорируется.

Для text-wrap: pretty такого ограничения нет, что, честно говоря, несколько обеспокоило меня. Поэтому я протестировал его.

Для теста я создал простую страницу, на которой 200 раз повторялся десятистрочный параграф. Я убедился, что абзац заканчивается сиротой для исправления text-wrap: pretty. Затем на вкладке "Производительность" в Chrome dev tools я включил 6-кратное замедление процессора и проверил, сколько времени потребовалось странице для рендеринга — десять раз без text-wrap: pretty и десять раз с ним.

Усреднённые результаты:

• Без text-wrap: pretty: 96,7 мс
• С text-wrap: pretty: 101,6 мс

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

Заключение

Как правило, для заголовков лучше использовать text-wrap: balance, а для основного текста — text-wrap: pretty. Попробуйте их в своём макете и посмотрите, как они выглядят. Если они выглядят хорошо, отлично! Это простой способ улучшить общую читабельность веб-страниц. Если нет — ничего страшного, вы не обязаны их использовать.

Если вас интересуют конкретные ситуационные приёмы контроля над переносом текста, ознакомьтесь с моим Исследованием переноса текста и слов.