CSS text-wrap: pretty для абзацев: ровные строки без ручной правки

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

Обычный алгоритм переноса заполняет каждую строку последовательно: браузер помещает слова, пока следующее не помещается, затем начинает следующую строку. Это быстро и подходит большинству текста, но иногда оставляет в конце абзаца одно короткое слово или неудачно распределяет последние строки. У читателя возникает визуальная пауза, а между абзацами будто появляется лишнее пустое место.

text-wrap: pretty разрешает браузеру оценить переносы в блоке целиком и выбрать более аккуратный вариант. CSS Text задаёт высокоуровневое намерение, но конкретный алгоритм и степень изменений могут различаться в разных движках. В одном браузере эффект может быть едва заметным, в другом — затронуть больше строк или исправить отдельные неровности набора. Свойство не гарантирует одинаковую длину всех строк и не делает каждую строку прямоугольной.

Подключение выглядит так:

css .article-body p { text-wrap: pretty; }

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

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

pretty сохраняет естественное заполнение абзаца по ширине, но разрешает более вдумчиво выбирать мягкие переносы. Его задача — улучшить общую картину набора, например избежать одинокого короткого окончания, а не разделить абзац на одинаковые по длине строки. Поэтому значение часто рассматривают для текстовых блоков, а balance — для компактных элементов; это рабочее правило выбора, а не запрет смешивать значения.

Визуальная разница зависит от самого текста. Абзац из двух строк может выглядеть лучше после balance, потому что короткий блок просто равномернее распределяется. В абзаце на восемь строк балансировать каждую строку нет необходимости: достаточно, чтобы край читался спокойно, а последняя строка не выглядела ошибкой. Сравнивайте свойства на своём контенте, а не только на демонстрационном предложении.

Испытайте pretty в длинном тексте статьи, описании товара или подробной карточке справки, если макет часто оставляет одну короткую последнюю строку. Это особенно полезно там, где текст автоматически меняется, а вручную подгонять переносы при каждом обновлении нельзя. Стилизация действует поверх содержания, поэтому редактор всё равно отвечает за ясность текста и корректное деление на абзацы.

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

Не включайте pretty на всём сайте без сравнения. Свойство может затрагивать много текстовых узлов, а документация MDN предупреждает о возможной цене вычислений по сравнению с обычным переносом. Насколько это заметно, зависит от движка, объёма текста, числа блоков и устройства; не нужно выводить из этого универсальное число строк или устройств. Добавьте правило сначала к ограниченному контейнеру, а затем измерьте страницу в условиях, близких к реальным.

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

Примените правило к основному текстовому контейнеру, а не ко всем p в приложении. Так вы не повлияете случайно на модальное окно, цену, навигацию или редактируемое поле. Если разные виды абзацев имеют разные требования, задайте отдельный класс в дизайн-системе, например .reading-copy, и опишите, где его применять.

Сделайте снимки одного и того же текста при одинаковой ширине, гарнитуре, кегле и межстрочном интервале. Сравнивайте только переносы: смена метрик шрифта или ширины контейнера может дать тот же эффект и запутать оценку. Проверьте несколько текстов, в том числе с длинными словами, пунктуацией и короткими заключительными фразами.

text-wrap: pretty не заменяет автоматические переносы внутри слова и не отменяет настройки языка. Если в русском абзаце проблема в длинных словах, отдельно оцените hyphens: auto и корректно заданный язык страницы. Избыточное использование мягких переносов вручную может привести к странным дефисам после смены ширины или шрифта. Меняйте один параметр за раз, чтобы понимать, что именно улучшило картину.

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

Значение pretty оставляет браузеру свободу выбирать точные переносы. Оно не означает: «перенеси именно это слово наверх» или «всегда исправляй только последнюю строку». Из-за этого один и тот же абзац может иметь разные окончания в Safari, Chromium-браузере и Firefox. Такой разброс не обязательно означает ошибку реализации; сами двигатели могут по-разному толковать задачу качественного переноса.

MDN описывает pretty как вариант обычного переноса, который использует более медленный алгоритм в пользу качества, и отдельно отмечает возможное влияние на производительность. Chrome для разработчиков описывает свою реализацию прежде всего через работу с коротким окончанием абзаца и предупреждает, что другие алгоритмы могут вести себя иначе. WebKit также подчёркивает, что реализации «pretty» не обязаны принимать одинаковые решения. Не обещайте в дизайн-системе идентичную разбивку строк во всех браузерах.

Перед публикацией зафиксируйте не точное расположение каждого слова, а критерии качества: в абзацах не появляется переполнение, исключён явно одиночный хвост там, где это возможно, а чтение и скорость страницы не ухудшились. Если макет требует абсолютного совпадения строк в PDF, картинке или фиксированном носителе, не полагайтесь только на браузерное правило — используйте контролируемую вёрстку и её экспортный процесс.

Если проект поддерживает браузеры с разной реализацией CSS, задайте сначала обычное поведение, а затем добавьте улучшение условно:

css .article-body p { text-wrap: wrap; }

@supports (text-wrap: pretty) { .article-body p { text-wrap: pretty; } }

Для неизвестного браузеру значения правило не должно превращаться в причину исчезновения текста: базовый стиль остаётся обычным переносом. Условие @supports проверяет синтаксическую поддержку, но не гарантирует одинаковую визуальную обработку. Это progressive enhancement: более новый движок может улучшить рисунок строки, а остальные показывают привычную версию. Для критичного макета всё равно нужен визуальный контроль.

Если абзац редактируется прямо на странице, подумайте о стабильности строк во время ввода. Пересчёт абзаца может менять строки вокруг курсора, пока человек дописывает текст. MDN отдельно описывает значение stable как способ сохранять уже введённые строки в редактируемом блоке. Не применяйте разные режимы наугад: проверьте взаимодействие в форме или редакторе, где важны позиция курсора, выделение и удобство набора.

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

Ожидать, что pretty выровняет абзац как заголовок. Для симметричного короткого блока проверяйте balance; pretty не обещает равные строки.

Использовать его как замену редактированию. Слишком длинное предложение, повтор или неясная структура останутся проблемой. Сначала исправьте текст и ширину блока, затем оцените автоматические переносы.

Применить правило глобально. Спецблоки, списки, интерфейсные подписи и редакторы могут требовать иного поведения. Ограничьте селектор основным текстом.

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

Добавлять ручные <br> ради одного скриншота. Принудительные разрывы часто становятся ошибочными после смены ширины. Используйте их только там, где структура текста действительно требует конкретного перехода строки.

Игнорировать производительность. Если страница содержит много блоков, проверьте загрузку и отзывчивость после включения правила, прежде чем расширять его действие.

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

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

balance пытается уравнять строки короткого блока, например заголовка. pretty сохраняет естественный набор абзаца и может улучшать отдельные переносы, включая слишком короткую последнюю строку. Это разные цели, хотя окончательный выбор зависит от контента.

Если браузер не знает новое значение, CSS-свойство может быть проигнорировано и останется обычный алгоритм переноса. При необходимости задайте обычный стиль по умолчанию, а pretty добавьте в @supports (text-wrap: pretty). Сверьтесь с таблицей совместимости и поддерживаемой матрицей проекта.

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

Можно, но сначала сравните его с balance. Для короткого заголовка часто важнее равномерно распределить строки в блоке; для длинного описательного подзаголовка может быть предпочтителен более естественный перенос.

Расчёт может быть сложнее обычного алгоритма, поэтому документация советует применять его осмысленно и проверять страницу. Измерьте время загрузки и отзывчивость на тех устройствах, которые поддерживает проект; не расширяйте действие, если заметного типографического выигрыша нет.

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

- CSS text-wrap — MDN — https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-wrap - CSS text-wrap: pretty — Chrome for Developers — https://developer.chrome.com/blog/css-text-wrap-pretty - Better typography with text-wrap pretty — WebKit — https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/