Coco

Posted on Jul 19, 2022

Interesting box-decoration-break

#css #javascript #html #web

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;
}

Example

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

<span>ABCDEFGHIJKLMN</span>

span {
    border: 2px solid #999;
}

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>

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;
}

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>

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>

Among them, we wrap the content that needs to be emphasized by  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;
}

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 , with the above styles  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  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>

box-decoration-break: clone To  take effect on, it can be achieved  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%);
}