text-wrap-mode

Ограниченная доступность

Эта функция не относится к Baseline, так как она не работает в некоторых из наиболее широко используемых браузеров.

Свойство text-wrap-mode CSS управляет тем, переносится ли текст внутри элемента на следующую строку. Разные значения предлагают альтернативные способы переноса содержимого блока элемента. Также его можно установить и сбросить с помощью сокращенной записи text-wrap.

Примечание: Название этого свойства является временным, пока CSSWG не найдёт более подходящее.

Попробуйте

Синтаксис

/* Keyword values */
text-wrap-style: wrap;
text-wrap-style: nowrap;

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

Значения

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

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

Формальное определение

Начальное значение	`wrap`
Применяется к	текстовым и блочным контейнерам
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

Формальный синтаксис

text-wrap-mode = 
  wrap    |
  nowrap

Примеры

Примечание: Проверьте поддержку этого свойства в браузерах.

Перенос содержимого

По умолчанию содержимое переносится, поэтому свойство text-wrap-mode не требуется. В этом примере содержимое переносится на следующую строку, чтобы оно поместилось в рамку, последняя строка длиннее рамки и выходит за её пределы.

HTML

<div class="box">CSS IS AWESOME</div>

CSS

.box {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 64px;
  box-sizing: border-box;
  border: 4px solid black;
  padding: 0px 3px;
  width: 223px;
  text-wrap-mode: wrap;
}

Результат

Отсутствие переноса содержимого

В этом примере содержимое не переносится на следующую строку, чтобы поместиться в рамку, так как содержимое явно указано не переносить с помощью text-wrap-mode: nowrap;, содержимое длиннее рамки и выходит за её пределы.

HTML

<div class="box">CSS IS AWESOME</div>

CSS

.box {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 64px;
  box-sizing: border-box;
  border: 4px solid black;
  padding: 0px 3px;
  width: 223px;
  text-wrap-mode: nowrap;
}

Результат

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

Спецификация
CSS Текстовый модуль Level 4 # text-wrap-mode

Совместимость с браузерами

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari в iOS	Samsung Internet	WebView Android
`text-wrap-mode`	Нет	Нет	124	Нет	17.4	Нет	124	Нет	17.4	Нет	Нет
`nowrap`	Нет	Нет	124	Нет	17.4	Нет	124	Нет	17.4	Нет	Нет
`wrap`	Нет	Нет	124	Нет	17.4	Нет	124	Нет	17.4	Нет	Нет

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap-mode