Оформление элемента, разбитого на несколько строк

Классы box-slice и box-clone задают свойство box-decoration-break. Строчный элемент, который переносится на несколько строк, делится на фрагменты; класс решает, режется ли его оформление по линиям переноса или повторяется целиком на каждом фрагменте. Берите их для выделенного текста, меток и ссылок с фоном и рамкой, которые могут переноситься.

Пример

Один и тот же строчный элемент с фоном, рамкой, внутренними отступами и скруглением разбит на три строки. Подпись над образцом — класс, который на нём стоит.

<div class="grid grid-col-1 sm:grid-col-2 gap-4 color-on-surface">
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">box-slice</code>
    <p class="m-0 line-loose">
      <span class="box-slice p-x-2 p-y-1/4 bg-primary-container color-on-primary-container border border-primary radius-ui">Одна рамка<br>разрезана<br>по строкам</span>
    </p>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">box-clone</code>
    <p class="m-0 line-loose">
      <span class="box-clone p-x-2 p-y-1/4 bg-primary-container color-on-primary-container border border-primary radius-ui">У каждой строки<br>своя рамка,<br>отступы и скругление</span>
    </p>
  </div>
</div>

Классы

Условия (что это): ширина экрана — нет; состояния — нет.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

box-slice — значение браузера по умолчанию: оформление рисуется так, будто элемент не разбит, и режется по линиям переноса. Рамка и скругление есть только в начале первой строки и в конце последней; внутренние отступы по краям строки на переносах не добавляются.

box-clone оформляет каждый фрагмент как отдельный элемент: у каждой строки своя полная рамка, скругление, внутренние отступы и тень, а фон рисуется заново для каждого фрагмента.

<p class="line-loose">
  <span class="box-clone p-x-2 bg-primary-container color-on-primary-container radius-ui">
    Выделенный текст, который переносится на несколько строк
  </span>
</p>

Вертикальные отступы строчного элемента не раздвигают строки: при фоне и рамке увеличьте высоту строки, например классом line-loose, чтобы фрагменты не наползали друг на друга.

Ограничения

• Разница видна только у элемента, который разбит на фрагменты: у строчного элемента, перенесённого на несколько строк. На элементе в одну строку оба класса выглядят одинаково.
• У семейства нет префиксов ширины экрана и состояния.

См. также

• Высота строки
• Внутренний отступ