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

Свойство text-wrap-mode CSS определяет, переносится ли текст внутри элемента.

Попробуйте

text-wrap-mode: wrap;

text-wrap-mode: nowrap;

<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>
        You can edit this lorem ipsum dolor sit amet consectetur adipisicing
        elit. Voluptatem aut cum eum id quos est text.
      </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;
}

Синтаксис

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

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

Значения

Для свойства text-wrap-mode задаётся одно из следующих ключевых слов:

wrap

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

nowrap

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

Описание

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

При значении nowrap текст будет выходить за пределы элемента, а не переноситься на несколько строк. Поскольку значением свойства overflow по умолчанию является visible, содержимое, превышающее встроенный размер контейнера, будет переполнять его в строчном направлении. Чтобы вместо переполнения включить прокрутку в строчном направлении, задайте для свойства overflow-inline значение auto или scroll. Чтобы ширина контейнера была не меньше ширины самого длинного слова, задайте для min-inline-size значение min-content.

При значении wrap содержимое при необходимости переходит на новые строки, переносясь в допустимых местах разрыва слов, например перед элементом <wbr> и дефисами, а также в других местах мягкого переноса, предусмотренных конкретным языком. Свойство не предотвращает переполнение в строчном направлении для неразрывных фрагментов содержимого, если их размер превышает встроенный размер контейнера.

Свойство text-wrap-mode входит в состав двух сокращённых свойств. Свойства text-wrap-mode и white-space-collapse можно задать с помощью сокращённого свойства white-space. Его также можно задать и сбросить вместе со свойством text-wrap-style с помощью сокращённого свойства text-wrap.

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

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

text-wrap-mode = 
  wrap |
  nowrap

Примеры

Основы использования

В этом примере мы сравним эффект двух значений свойства text-wrap-mode.

HTML

Мы добавим два элемента <div>, которые отличаются только именами классов.

<div class="wrap">CSS IS AWESOME</div>
<div class="nowrap">CSS IS AWESOME</div>

CSS

Мы применим одинаковые стили к обоим контейнерам и ограничим их ширину.

div {
  font-family: "Arial", sans-serif;
  font-weight: bold;
  font-size: 4rem;
  box-sizing: border-box;
  border: 0.25rem solid black;
  padding: 0 4px;
  width: 14rem;
  margin: 1rem;
}

Для примеров зададим разные значения text-wrap-mode:

.wrap {
  text-wrap-mode: wrap;
}
.nowrap {
  text-wrap-mode: nowrap;
}

Результат

В примере с wrap содержимое переходит на следующую строку, чтобы поместиться в блок. Слово «Awesome» шире содержащего его блока и не имеет мест мягкого переноса, поэтому оно выходит за его пределы.

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

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

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

См. также

• text-wrap
• text-wrap-style
• hyphens
• white-space
• overflow
• Текст CSS module
• Переполнение CSS module