text-wrap: pretty — как сделать переносы текста в абзацах аккуратнее

Дата публикации: 01.09.2026

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

Например:

Хорошая типографика помогает сделать текст удобнее для
чтения и одновременно делает страницу визуально
аккуратнее.

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

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

p {
    text-wrap: pretty;
}

Что делает text-wrap: pretty

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

При этом браузер не меняет сам текст и не вставляет в HTML дополнительные переносы. Он просто выбирает другой вариант разбиения текста на строки.

Это особенно полезно для обычных абзацев:

.article-content p {
    text-wrap: pretty;
}

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

Почему это не то же самое, что text-wrap: balance

У balance и pretty похожая идея, но предназначение разное.

balance старается равномерно распределить текст между строками и хорошо подходит для коротких блоков — прежде всего заголовков:

h1,
h2,
h3 {
    text-wrap: balance;
}

pretty предназначен для более длинного текста:

p {
    text-wrap: pretty;
}

То есть условно:

Заголовок → balance

Абзац → pretty

Нужно ли применять его ко всем абзацам?

Если сайт не содержит огромных объёмов текста, pretty можно задать для основного контента:

.article-content p {
    text-wrap: pretty;
}

Я бы именно ограничивал правило областью контента статьи, а не применял его глобально ко всему сайту.

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

Что происходит с производительностью?

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

Поэтому это всё равно не свойство, которое имеет смысл бездумно назначать каждому текстовому узлу страницы.

Для обычной статьи правило уровня .article-content p — вполне разумный вариант.

А если нужен конкретный перенос?

pretty не даёт возможности указать браузеру конкретное место переноса.

Если определённые слова должны оставаться вместе, по-прежнему можно использовать неразрывный пробел:

дизайн и разработка

Но это уже ручное управление конкретным фрагментом текста.

pretty решает другую задачу — позволяет браузеру самостоятельно улучшить общую картину переносов.

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

text-wrap: pretty поддерживается современными браузерами. В браузерах без поддержки свойство просто игнорируется, поэтому обычная схема переноса текста сохраняется.

Это делает pretty удобным примером прогрессивного улучшения: можно добавить его в CSS без отдельной версии разметки или JavaScript-проверок.

Для статьи или другого большого текстового блока достаточно:

.article-content p {
    text-wrap: pretty;
}

А для заголовков рядом с ним:

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4 {
    text-wrap: balance;
}

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