Интересный box-decoration-break

За последние два дня я наткнулся на очень интересное свойство CSS — box-decoration-break. Давайте посмотрим.

Как мы можем понять box-decoration-break?

• box — коробка, под которой можно понимать модель коробки элемента, например, тега div
• украшение — понимается как стиль элемента
• break — перенос строки, ссылочный перенос слова, понимается как выполнение переноса строки

Тогда это свойство можно понимать в первую очередь как выражение стиля элемента, когда происходит перенос строки.

MDN: CSS-свойство box-decoration-break определяет, как должны отображаться фрагменты элемента при разрыве на несколько строк, колонок или страниц. Общая идея заключается в том, что свойство box-decoration-break определяет, как фрагмент элемента должен быть отображен при обводе/разрыве строки.

Можно выбрать только два значения:

{
    box-decoration-break: slice;   // default
    box-decoration-break: clone;
}

Пример

Этот атрибут обычно работает на инлайн-элементах. Предположим, у нас есть следующая структура и мы добавляем к ней границу:

<span>ABCDEFGHIJKLMN</span>

span {
    border: 2px solid #999;
}

Ну, эффект выглядит следующим образом, это очень нормальный эффект:

Ну, а следующий шаг — break, мы разрываем текст вышеуказанной строки, а стиль остается неизменным:

<span>ABCD <br/>EFG <br/> HI<br/> JKLMN</span>

Получили следующий результат:

Вы можете видеть, что когда текст разворачивается, граница также изменяется. Первая и последняя строки имеют три границы, а средние две строки имеют только верхнюю и нижнюю границы. Если объединить эти 4 строки, то их можно собрать в рисунок 1, что является обычным эффектом отображения.

Далее добавляем главного героя этой статьи box-decoration-break: clone:

span {
    border: 2px solid #999;
+   box-decoration-break: clone;
}

После вступления в силу мы получим следующий результат:

box-decoration-break: clone

Видя это, мы уже можем примерно понять роль этого свойства:

box-decoration-break: cloneInline элементы, которые используют, если есть обертывание строк, каждая строка будет иметь всю полноту стилизации исходной отдельной строки.

Давайте рассмотрим еще один пример, чтобы углубить наше понимание. Существует следующая структура, которая использует два эффекта box-decoration-break: clone перед:

<span >每一行 <br/>样式 <br/> 都 <br/> 保持<br/> 完整独立</span>

CodePen Demo — box-decoration-break

box-decoration-break: clone Эффективный диапазон

Конечно, элементы, которые использует box-decoration-break: clone, доступны не для каждого стиля, а только для следующих стилей:

• фон
• border
• border-image
• box-shadow
• clip-path
• margin
• padding
• Синтаксис

box-decoration-break: клон в действии

Далее посмотрим, есть ли надежные сценарии практического применения.

box-decoration-break: clone для достижения эффекта выделения текста

Бывают сценарии, когда мы хотим выделить определенный абзац текста в многострочном тексте. В этом случае мы можем вложить SPAN в P, чтобы показать текст, обернутый SPAN, определенным образом.

Например, у нас есть такой текст:

<p>
The <span>box-decoration-break</span> CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the <span>specified border, padding, and margin wrapping each fragment.</span> The border-radius, border-image, and box-shadow are applied to each <span>fragment independently.</span> 
</p>

Среди них мы обернем содержимое, которое должно быть подчеркнуто тегами <span>, зададим определенный стиль и добавим box-decoration-break: clone, чтобы независимо от того, обернут подчеркнутый текст или нет, подчеркнутый фон в каждом месте был одинаковым:

p {
    font-size: 22px;
    line-height: 36px;
}

span {
    background-image: linear-gradient(135deg, deeppink, yellowgreen);
    color: #fff;
    padding: 2px 10px;
    border-radius: 50% 3em 50% 3em;
    box-decoration-break: clone;
}

Получите следующий эффект:

Что если не добавлять box-decoration-break: clone? Тогда при наличии новой строки эффект будет сильно уменьшен:

CodePen Demo — демонстрация разрыва декоративной рамки текста

box-decoration-break с определенной границей для каждой строки текста

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

Как этого добиться? Возможно, по одной на строку <p>, с установленными выше стилями <p>. Но что если содержимое текста неопределенно, а ширина контейнера неопределенна?

В этом случае также используется сценарий box-decoration-break. Конечно, здесь есть небольшая хитрость. Обычно box-decoration-break: clone работает только на элементе inline, если наша копия обернута в тег <p>, как здесь:

<p>
The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the specified border, padding, and margin wrapping each fragment. The border-radius, border-image, and box-shadow are applied to each fragment independently. 
</p>

box-decoration-break: clone Чтобы <p> начал действовать, его можно <p> добиться <p> с помощью display: inline. Таким образом, для достижения вышеуказанного эффекта нам нужно только:

p {
    display: inline;
    box-decoration-break: clone;
    background:linear-gradient(110deg, deeppink 0%, deeppink 98%, transparent 98%, transparent 100%);
}

Идеально вписывается независимо от того, как меняется содержимое текста или ширина контейнера:

CodePen Demo — box-decoration-break Каждая строка текста с определенной границей

box-decoration-break в сочетании с анимацией перехода

Объединяя вышесказанное, мы также можем рассмотреть возможность сочетания box-decoration-break с эффектами перехода или анимации.

Например, мы надеемся, что при наведении курсора на текстовое содержимое, некоторые абзацы текста, которые необходимо отобразить, могут быть выделены, что может выглядеть следующим образом:

CodePen Demo — box-decoration-break с анимацией перехода

Или：

CodePen Demo — box-decoration-break с анимацией перехода

Вы можете попробовать щелкнуть в Демо, а затем удалить box-decoration-break: clone его, вы обнаружите, что эффект значительно уменьшился.

Compatibility（2022–07–19）

Ну, согласно обычной совместимости, она не должна быть очень хорошей. Кроме того, MDN дает такую подсказку:

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

Взгляните на Can I Use, это действительно хорошо:

Наконец-то

Больше замечательных технических статей по CSS собрано на моем Github — iCSS.

И, возможно, вам понравится мой CodePen, в котором собрано большое количество удивительных CSS эффектов.

Ну, вот и все для этой статьи, надеюсь, она вам поможет :).