Оформление элемента, разбитого на несколько строк (box-decoration-break)link

https://dev.ru.simai.io/ru/ui/utility/layout/box-decoration-break.php

Модификатор box-decoration-break предназначен для управления тем, как оформляются элементы, фрагментируемые на несколько строк или колонок (например, при переносе текста). Он определяет, сохраняется ли оформление цельно для всего элемента или применяется отдельно к каждому фрагменту.

Синтаксисlink

Использование: {модификатор}

  • Модификатор (обязательный параметр):
    • box-slice — оформительские свойства (рамки, отступы, тени, фоновая заливка) рассматриваются так, будто содержимое не разделяется на фрагменты. Другими словами, элемент выглядит как единый блок, даже если текст переносится на новую строку.
    • box-clone — каждый фрагмент элемента, появляющийся на новой строке или странице, оформляется независимо. Для каждого фрагмента применяются указанные стили (например, рамки или фон) так, словно это отдельный элемент.

Примерыlink

box-slicelink

С помощью модификатора box-slice элемент воспринимается как единый целый блок, даже при переносе содержимого:

<span class="box-slice bg-clip-text color-transparent gr-line-2 gr-to-top gr1-purple-5 gr2-red-5">
    Hello<br>
    World
</span>

box-clonelink

С помощью модифатора box-clone каждый перенесённый фрагмент элемента будет иметь собственное оформление, как если бы каждый был отдельным элементом:

<span class="box-clone bg-clip-text color-transparent gr-line-2 gr-to-top gr1-purple-5 gr2-red-5">
    Hello<br>
    World
</span>