Расположение текста, особенно в конце строк и абзацев, может влиять на удобочитаемость и эстетическую привлекательность страницы. В CSS есть несколько вариантов переноса текста, которые могут улучшить определенные сценарии использования.
Для коротких блоков текста, например заголовков, используйте text-wrap: balance. Это свойство указывает браузеру распределять текст по строкам как можно более равномерно, чтобы он выглядел более симметрично.
Свойство CSS text-wrap: pretty позволяет улучшить типографику основного текста за счет более сложного алгоритма переноса. Она позволяет избежать висячих строк (когда на последней строке абзаца остается одно слово) и сделать длинные блоки текста более удобными для чтения.
Реализация
1. Определите текстовые элементы.
Для text-wrap: balance выбирайте короткие текстовые блоки, например заголовки и названия столбцов в таблицах. Не используйте элементы с видимыми границами или фоном, так как это может привести к появлению пустых областей в макете.
Для text-wrap: pretty выберите элементы, которые могут содержать длинные фрагменты текста, где висячие слова или неудачные переносы строк наиболее заметны. В частности, это касается следующих элементов:
<p><blockquote><li>- Любой другой элемент, который может содержать длинные фрагменты текста.
Как выбрать подходящий метод упаковки
| Критерии | text-wrap: balance |
text-wrap: pretty |
text-wrap: wrap (по умолчанию) |
|---|---|---|---|
| Для чего подходит | Короткие блоки (заголовки, названия) | Длинные блоки (абзацы, списки) | Контент, критически важный для производительности |
| Визуальная цель | Симметричная длина строк | Как избежать висячих строк | Быстрая стандартная упаковка |
| Ограничения на уровне позиции | До 6–10 строк (ограничение алгоритма) | Лучше всего подходит для 3 и более строк | Без ограничений |
| Стоимость рекламы | Высокая – алгоритм бинарного поиска | Средний – алгоритм ретроспективного анализа. | Низкий. Стандартный жадный алгоритм. |
2. Примените выбранный контейнер:
Применяйте text-wrap: balance только к коротким многострочным элементам, таким как заголовки (h1–h6), подзаголовки или цитаты.
/* Target specific heading elements for balanced wrapping */
h1, h2, h3, h4, h5, h6 {
/* Enables balanced line-breaking logic */
text-wrap: balance;
}
Используйте text-wrap: pretty, чтобы включить оптимизированный алгоритм, который оценивает последние несколько строк абзаца и находит лучшие точки разрыва.
/* Apply to multi-line text blocks to prevent orphaned words */
p, blockquote, li, .pretty-text {
/* Enables pretty line-breaking logic for body copy */
text-wrap: pretty;
}
Критические ограничения и производительность
text-wrap: balance
- Ограничение по количеству строк. Браузеры ограничивают количество строк, которые они пытаются сбалансировать, чтобы поддерживать производительность (обычно 6 строк в Chromium и 10 строк в Firefox). Если текст превышает это ограничение, браузер возвращается к стандартному поведению
wrap. Не используйтеtext-wrap: balanceдля блоков текста, которые могут превысить эти ограничения. - Целевое применение. НЕ применяйте
text-wrap: balanceглобально (например,* { text-wrap: balance; }). Итеративный алгоритм двоичного поиска, используемый браузерами, требует больших вычислительных ресурсов. Используйте его только для определенных коротких текстовых элементов. - Взаимодействие с шириной. Свойство
text-wrap: balanceне меняет ширину контейнера (inline-size). Оно влияет только на то, как текст переносится внутри этой ширины. В результате в конце контейнера может остаться пустое место, что может повлиять на макеты, в которых используются текстовые блоки на всю ширину.
text-wrap: pretty
- Производительность и качество. ОБЯЗАТЕЛЬНО. Алгоритм
text-wrap: prettyтребует больше вычислительных ресурсов, чем стандартный алгоритмwrap, поскольку он оценивает несколько строк (обычно последние четыре), чтобы оптимизировать точки разрыва. Не применяйте его ко всем элементам, если на странице очень много текста. - Лучше всего подходит для многострочного текста. Преимущества
prettyнаиболее заметны в абзацах из трех и более строк. На короткий однострочный текст это практически не влияет. - Особенности работы в разных браузерах. Помните, что реализация может различаться. Браузеры на основе Chromium обычно фокусируются на последних четырех строках, а другие движки могут оценивать весь абзац.
Резервные стратегии
В браузерах, которые не поддерживают text-wrap: balance или text-wrap: pretty, свойство игнорируется, а текст переносится по умолчанию (wrap). Это прогрессивное улучшение, которое постепенно сокращается до стандартной типографики. Это гарантирует, что ваш контент будет отлично читаться во всех браузерах, а в тех, которые поддерживают эту функцию, он будет выглядеть ещё лучше.
Для критически важных макетов, где требуется точное расположение текста, используйте библиотеку JavaScript, но имейте в виду, что это может быть медленно и вызывать проблемы производительности.