Свойство CSS `text-wrap`

Свойство text-wrap CSS сокращённое управляет переносом текста внутри элемента. Разные значения позволяют:

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

Попробуйте

text-wrap: wrap;

text-wrap: nowrap;

text-wrap: balance;

text-wrap: pretty;

text-wrap: stable;

<section class="default-example" id="default-example">
  <div class="whole-content-wrapper">
    <p>Edit the text in the box:</p>
    <div class="transition-all" id="example-element">
      <p contenteditable>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem aut
        cum eum id quos est.
      </p>
    </div>
  </div>
</section>

.whole-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#example-element {
  border: 1px solid #c5c5c5;
  width: 250px;
}

Составные свойства

Это сокращённая запись следующих свойств 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;

Значения

Свойству задаётся одно из следующих ключевых слов:

wrap

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

nowrap

Текст не переносится на следующие строки. Вместо переноса на новую строку он выйдет за пределы содержащего его элемента.

balance

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

pretty

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

stable

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

Описание

Текст внутри блока содержимого, например абзаца (<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'>

Примеры

Сравнение основных значений переноса текста

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>

CSS

.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 (2023)
• CSS text-wrap: pretty на developer.chrome.com (2023)
• Балансировка японской и корейской типографики, Келли Чойс-Дван (2025)