DEV Community

Coco
Coco

Posted on

Interesting box-decoration-break

In the past two days, I came across a very interesting CSS property — box-decoration-break. Let’s take a look.

How can we understand box-decoration-break?:

  • box — box, which can be understood as an element box model, like a div tag
  • decoration — understood as element style
  • break — line break, reference word-break, understood as the performance of line break

Then, this property can be first understood as the expression of the element’s style when a line break occurs.

MDN: The box-decoration-break CSS property specifies how an element’s fragments should be rendered when broken across multiple lines, columns, or pages. The general idea is that the box-decoration-break property specifies how an element fragment should be rendered when a line wrap/break occurs.

Only two values ​​can be selected:

{
    box-decoration-break: slice;   // default
    box-decoration-break: clone;
}
Enter fullscreen mode Exit fullscreen mode

Example

This attribute usually works on inline elements. Suppose we have the following structure and add a border to it:

<span>ABCDEFGHIJKLMN</span>
Enter fullscreen mode Exit fullscreen mode
span {
    border: 2px solid #999;
}
Enter fullscreen mode Exit fullscreen mode

Well, the effect is as follows, it's a very normal effect:

Well, the next step is break, we break the text of the above line, and the style remains unchanged:

<span>ABCD <br/>EFG <br/> HI<br/> JKLMN</span>
Enter fullscreen mode Exit fullscreen mode

Got the following result:

you can see that when the text wraps, the border also changes. The first and last lines have three borders, and the middle two lines have only the upper and lower borders. If the 4 lines are combined, they can be assembled into Figure 1, which is a normal display effect.

Next, we add the protagonist of this article box-decoration-break: clone:

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

After it takes effect, we will get this result:

box-decoration-break: clone

Seeing this, we can already roughly understand the role of this property:

box-decoration-break: cloneInline elements that use, if there is line wrapping, each line will have all the full styling of the original single line.

Let's look at another example to deepen our understanding. There is the following structure, which uses the two effects box-decoration-break: clone before:

<span >每一行 <br/>样式 <br/><br/> 保持<br/> 完整独立</span>
Enter fullscreen mode Exit fullscreen mode

CodePen Demo -- box-decoration-break

box-decoration-break: clone Effective Range

Of course, elements that box-decoration-break: clone use are not available for every style, but only for the following styles:

  • background
  • border
  • border-image
  • box-shadow
  • clip-path
  • margin
  • padding
  • Syntax

box-decoration-break: clone in action

Next, let's see if there are any reliable practical application scenarios.

box-decoration-break: clone to achieve text selection effect

There will be scenarios where we want to highlight a specific paragraph of text in a multi-line text. In this case, we can nest the SPAN with P to show the SPAN wrapped text in some specific way.

For example, we have this text:

<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>
Enter fullscreen mode Exit fullscreen mode

Among them, we wrap the content that needs to be emphasized by <span> tags , give a specific style and add box-decoration-break: clone it, so that no matter whether the emphasized text wraps or not, the emphasized background of each place is the same:

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;
}
Enter fullscreen mode Exit fullscreen mode

Get the following effect:

What if you don't add box-decoration-break: clone? Then if there is a newline, the effect will be greatly reduced:

CodePen Demo -- text-decoration-break demo

box-decoration-break with a specific border for each line of text

There will be such a scenario, we want each line of copy to have a specific border style, like this:

How to achieve it? Maybe one per line <p>, with the above styles <p> set. But what if the text content is indeterminate and the container's width is indeterminate?

This scenario box-decoration-break is also use. Of course, there is a little trick here. Normally, it box-decoration-break: clone only works on the inline element , if our copy is wrapped in a <p> tag like this:

<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>
Enter fullscreen mode Exit fullscreen mode

box-decoration-break: clone To <p> take effect on, it can be achieved <p> by display: inline. In this way, to achieve the above effect, we only need:

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

Fits perfectly no matter how the text content or container width changes:

box-deraction-break

CodePen Demo -- box-decoration-break Each line of text with a specific border

box-decoration-break combined with transition animation

Combining the above, we can also consider combining box-decoration-break with transition effects or animation effects.

For example, we hope that when we hover the text content, some text paragraphs that need to be displayed can be highlighted, which may be like this:

box-deraction-break-hover

CodePen Demo -- box-decoration-break with transition animation

Or:

box-deraction-break-hover2

CodePen Demo -- box-decoration-break with transition animation

You can try to click into Demo, and then remove box-decoration-break: clone it, you will find that the effect is greatly reduced.

Compatibility(2022–07–19)

Well, according to the usual compatibility, it should not be very good. And MDN also gives this hint:

This is an experimental technology. Check the Browser compatibility table carefully before using this in production.

Take a look at Can I Use, it's actually good:

Finally

More wonderful CSS technical articles are summarized in my Github -- iCSS.

And maybe you will love my CodePen, which has a large number of amazing CSS effects.

Well, that's all for this article, I hope it helps you. :)

Top comments (0)