text-wrap

Определение и применение

Свойство text-wrap управляет переносом строк и выбором мест разрыва. Оно объединяет разрешение переноса text-wrap-mode и стратегию раскладки text-wrap-style, позволяя, например, сделать строки заголовка ближе по длине.

Как подобрать переносы для короткого заголовка и абзаца — в уроке «Форматирование текста в CSS».

Попробуйте значения text-wrap

<div class="stage">
  <h3 class="demo-target" style="width: 280px">
    Простые советы для прогулки с собакой в парке
  </h3>
</div>

<div class="stage">
  <h3 class="demo-target" style="width: 190px">
    Простые советы для прогулки с собакой в парке
  </h3>
</div>

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  max-width: 100%;
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  text-wrap: wrap;
}

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  max-width: 100%;
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  text-wrap: balance;
}

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  max-width: 100%;
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  text-wrap: pretty;
}

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

Спецификация: CSS text-4

✓Поддерживается во всех основных браузерах с 2024 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьcss.properties.text-wrap

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
text-wrap	✓114	✓114	✓121	✓100	✓17.4	✓114	✓121	✓76	✓17.4	✓23.0	✓114	✓17.4
auto	✓130	✓130	✓121	✓115	✓17.4	✓130	✓121	✓86	✓17.4	✓28.0	✓130	✓17.4
balance	✓114	✓114	✓121	✓100	✓17.5	✓114	✓121	✓76	✓17.5	✓23.0	✓114	✓17.5
nowrap	✓114	✓114	✓124	✓100	✓17.4	✓114	✓124	✓76	✓17.4	✓23.0	✓114	✓17.4
pretty	✓117	✓117	×Нет	✓103	✓26	✓117	×Нет	✓78	✓26	✓24.0	✓117	✓26
stable	✓130	✓130	✓121	✓115	✓17.5	✓130	✓121	✓86	✓17.5	✓28.0	✓130	✓17.5
wrap	✓114	✓114	✓124	✓100	✓17.4	✓114	✓124	✓76	✓17.4	✓23.0	✓114	✓17.4

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

Поддержка pretty, stable и avoid-short-last-line отличается от поддержки самого сокращения. При неподдерживаемом значении объявление игнорируется: оставляйте нормальный перенос рабочим запасным вариантом.

CSS синтаксис:

text-wrap: [ wrap | nowrap ] ||
           [ auto | balance | stable | pretty | avoid-short-last-line ];

/* Глобальные значения */
text-wrap: initial | inherit | unset | revert | revert-layer;

| разделяет варианты внутри группы. || позволяет указать одну или обе группы в любом порядке. Например, balance означает wrap balance, а nowrap — nowrap auto.

JavaScript синтаксис:

element.style.textWrap = "balance";

Начальное значение свойства

• text-wrap-mode — wrap.
• text-wrap-style — auto.

Значения свойства

Переносы без выравнивания текста

balance не центрирует текст: для этого отдельно нужен text-align. В отличие от white-space, сокращение не управляет схлопыванием пробелов. При изменении только стратегии можно использовать text-wrap-style, сохранив текущий режим переноса.

Для длинного адреса без пробелов нужна допустимая точка разрыва или overflow-wrap; balance сам по себе не решает переполнение. Алгоритмы pretty и balance могут давать разные результаты в разных браузерах. Не ставьте ручные <br> только ради точного совпадения строк на одном размере экрана.

Спецификация

CSS Text — text-wrap.

Наследуется

Да.

Анимируемое

Тип анимации — дискретный: значение переключается без плавных промежуточных положений.

Примеры, попробуйте сами

Сбалансированный заголовок

Сузьте результат и сравните balance, wrap и pretty. Меняется выбор точек переноса, а выравнивание остаётся прежним. Результат зависит от длины текста и ширины.

base.css

CSS

body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}
h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.25;
    border: 1px dashed #64748b;
    padding: 12px;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Сбалансированный заголовок</title>
  </head>
  <body>
    <h2>Как Тони нашёл короткую дорогу к лесному озеру</h2>
  </body>
</html>

style.css

CSS

h2 {
    max-width: 24ch;
    text-wrap: balance;
}