text-wrap

Это свойство является сокращением для следующих свойств CSS:

• text-wrap-mode
• text-wrap-style

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

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

Свойство text-wrap задаётся одним ключевым словом из списка значений ниже.

wrap

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

nowrap

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

balance

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

pretty

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

stable

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

Существует 2 способа, как текст может переходить на новые строки внутри блока контента, например, абзаца (<p>) или заголовков (<h1>–<h6>). Это принудительные разрывы строк, которые контролируются пользователем, и мягкие разрывы строк, которые контролируются браузером. Свойство text-wrap можно использовать для указания браузеру, как управлять мягкими разрывами строк.

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

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

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

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

text-wrap = 
  <'text-wrap-mode'>   ||
  <'text-wrap-style'>  

<text-wrap-mode> = 
  wrap    |
  nowrap  

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

HTML

<h2 class="wrap" contenteditable="true">
  The default behavior; the text in the heading wraps "normally"
</h2>

<h2 class="nowrap" contenteditable="true">
  In this case the text in the heading doesn't wrap, and overflows the container
</h2>

<h2 class="balance" contenteditable="true">
  In this case the text in the heading is nicely balanced across lines
</h2>

.wrap {
  text-wrap: wrap;
}

.nowrap {
  text-wrap: nowrap;
}

.balance {
  text-wrap: balance;
}

h2 {
  font-size: 2rem;
  font-family: sans-serif;
}

Результат

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

• white-space
• white-space-collapse
• Модуль CSS текста
• CSS text-wrap: balance на developer.chrome.com
• CSS text-wrap: pretty на developer.chrome.com