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

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

Попробуйте

text-wrap-style: auto;

text-wrap-style: balance;

text-wrap-style: pretty;

text-wrap-style: 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;
}

Синтаксис

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

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

Значения

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

auto

Текст переносится наиболее эффективным для браузера способом без учёта количества символов.

balance

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

pretty

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

stable

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

Спецификация также определяет значение avoid-orphans, при котором браузеры учитывают более одной строки при выборе мест переноса, чтобы избежать слишком коротких последних строк. Это значение пока не поддерживается ни в одном браузере.

Описание

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

Если содержимое допускает перенос — это обычное поведение, поскольку значение свойства text-wrap-mode по умолчанию — wrap, — единственное ключевое значение свойства text-wrap-style определяет, как разработчик хочет переносить текст. Значения не влияют на места возможного мягкого переноса, а лишь определяют, какие из них выберет браузер. Если свойству text-wrap-mode задано значение nowrap, это свойство не действует.

Выбор значения

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

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

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

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

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

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

text-wrap-style = 
  auto |
  balance |
  stable |
  pretty

Примеры

Сбалансированный текст

В этом примере показаны два абзаца: для первого используется значение auto по умолчанию, а для второго — balance.

HTML

<h2>Unbalanced</h2>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, ad. Impedit
  adipisci rerum modi praesentium atque aperiam vitae nesciunt consectetur
  assumenda deleniti repudiandae perferendis sed odio doloremque, aliquid natus
  laboriosam?
</p>
<h2>Balanced</h2>
<p class="balanced">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, ad. Impedit
  adipisci rerum modi praesentium atque aperiam vitae nesciunt consectetur
  assumenda deleniti repudiandae perferendis sed odio doloremque, aliquid natus
  laboriosam?
</p>

CSS

p {
  max-width: 60ch;
}
.balanced {
  text-wrap-style: balance;
}

Результат

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

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

См. также

• text-wrap
• text-wrap-mode
• hyphens
• hyphenate-limit-chars
• модуль CSS Text