Interesting box-decoration-break
Tags: css, javascript, html, web
Published: 2022-07-19 09:09:42

---
title: Interesting box-decoration-break
published: true
description: Using box-decoration-break to create amazing css word effects
tags: CSS, Javascript, html, web
# cover_image: https://user-images.githubusercontent.com/8554143/53489160-65129700-3acb-11e9-803f-0bb10ad1ed73.gif
# Use a ratio of 100:42 for best results.
---

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:

```CSS
{
    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:

```HTML
<span>ABCDEFGHIJKLMN</span>
```

```CSS
span {
    border: 2px solid #999;
}
```

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

![](https://user-images.githubusercontent.com/8554143/53408874-9a9b7f80-39fa-11e9-9d9b-015de637fff7.png)

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

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

Got the following result:

![](https://user-images.githubusercontent.com/8554143/53408966-cb7bb480-39fa-11e9-8a15-8f9e3af4d40c.png)

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`:

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

After it takes effect, we will get this result:

![](https://user-images.githubusercontent.com/8554143/53409207-58267280-39fb-11e9-9cc7-037d99a388b4.png)

## 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:

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

![](https://user-images.githubusercontent.com/8554143/53410136-e1d73f80-39fd-11e9-9dac-e38696c39ae8.png)

[CodePen Demo -- box-decoration-break](https://codepen.io/Chokcoco/pen/NJKoNq)

### 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:

```HTML
<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 `<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:

```CSS
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:

![](https://user-images.githubusercontent.com/8554143/53463012-ae89c480-3a80-11e9-960a-b6b1208d016e.png)

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

![](https://user-images.githubusercontent.com/8554143/53463598-49cf6980-3a82-11e9-9939-68efa4b23f44.png)

[CodePen Demo -- text-decoration-break demo](https://codepen.io/Chokcoco/pen/rRaLqo)

### 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:

![](https://user-images.githubusercontent.com/8554143/53466822-78534180-3a8e-11e9-9b76-cee0b6571f4f.png)

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**:

```HTML
<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 `<p>` take effect on, it can be achieved `<p>` by `display: inline`. In this way, to achieve the above effect, we only need:

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

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

![box-deraction-break](https://user-images.githubusercontent.com/8554143/53467207-28757a00-3a90-11e9-9b8d-b573dd8b8d8e.gif)

[CodePen Demo -- box-decoration-break Each line of text with a specific border](https://codepen.io/Chokcoco/pen/gEbMGr?editors=1100)

### 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](https://user-images.githubusercontent.com/8554143/53487465-9dfc3d00-3ac6-11e9-884e-00c19344ad70.gif)

[CodePen Demo -- box-decoration-break with transition animation](https://codepen.io/Chokcoco/pen/ZPGpmd)

Or：

![box-deraction-break-hover2](https://user-images.githubusercontent.com/8554143/53489160-65129700-3acb-11e9-803f-0bb10ad1ed73.gif)

[CodePen Demo -- box-decoration-break with transition animation](https://codepen.io/Chokcoco/pen/ZPGpmd)

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](https://caniuse.com/#search=box-decoration-break), it's actually good:

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwy8d40xfuppngf6c4sy.png)

## Finally

More wonderful CSS technical articles are summarized in my [Github -- iCSS](https://github.com/chokcoco/iCSS).

And maybe you will love my [CodePen](https://codepen.io/Chokcoco/), which has a large number of amazing CSS effects.

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