text-wrap-style

/* Keyword values */
text-wrap-style: auto;
text-wrap-style: balance;
text-wrap-style: pretty;
text-wrap-style: stable;

/* Global values */
text-wrap-style: inherit;
text-wrap-style: initial;
text-wrap-style: revert;
text-wrap-style: revert-layer;
text-wrap-style: unset;

При разрешенном переносе (см. text-wrap-mode), свойство text-wrap-style задаётся одним ключевым словом из списка значений ниже.

auto

Текст переносится на новые строки самым производительным для браузера способом, не учитывая количество символов.

balance

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

pretty

Текст переносится на новые строки с использованием более медленного алгоритма, который отдаёт приоритет лучшему макету над скоростью. Это предназначено для основного текста, где хорошая типографика ценится выше производительности (например, когда необходимо минимизировать количество висячих строк).

stable

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

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

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

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

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

Значение stable улучшает пользовательский опыт при использовании на содержимом, которое contenteditable. Это значение гарантирует, что при редактировании текста пользователем предыдущие строки в области редактирования остаются неизменными.

text-wrap-style = 
  auto           |
  balance        |
  stable         |
  pretty         |
  avoid-orphans  

В этом примере есть два абзаца, первый – это значение по умолчанию auto, а второй – balance.

HTML

<h2>Unbalanced</h2>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, ad. Impedit
  adipisci rerum modi praesentium atque aperiam vitae nesciunt consectetur
  assumenda deleniti repudiandae perferendis sed odio doloremque, aliquid natus
  laboriosam?
</p>
<h2>Balanced</h2>
<p class="balanced">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, ad. Impedit
  adipisci rerum modi praesentium atque aperiam vitae nesciunt consectetur
  assumenda deleniti repudiandae perferendis sed odio doloremque, aliquid natus
  laboriosam?
</p>

CSS

p {
  max-width: 60ch;
}
.balanced {
  text-wrap-style: balance;
}

Результат

• text-wrap
• text-wrap-mode