Codectionary / Developer documentation / CSS

Decorations across Line Breaks

An inline box can split into fragments when its text wraps across lines.

What it is and why to use it

An inline box can split into fragments when its text wraps across lines. box-decoration-break controls whether borders, backgrounds and padding are treated as one sliced decoration or repeated for each fragment. clone is useful for a highlighted phrase that should have a complete decoration on every wrapped line.

Common mistakes and limitations

Support and prefix requirements vary, so test the target browser. Fragment decoration is not a substitute for a real padded block when the content should be one panel. Avoid highlights that reduce line readability or obscure adjacent text.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<p class="text"><span class="highlight">A highlighted phrase that wraps across more than one line.</span></p>

Syntax

box-decoration-break: clone;

Examples

Decorations across Line Breaks

Run the CSS against the supplied HTML, then experiment with the values.

.text { max-width: 17rem; font: 1.4rem/1.8 system-ui; }
.highlight { padding: .15rem .4rem; background: #dbeafe; color: #172b4d; border-radius: .3rem; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  1. The narrow paragraph makes the inline span wrap.
  2. clone applies the decoration separately to each resulting fragment.
  3. The prefixed declaration supports implementations using that spelling, while the standard declaration expresses the same intention. Compare with slice to see the edge difference.
HTML used by this example
<div class="demo"><p class="text"><span class="highlight">A highlighted phrase that wraps across more than one line.</span></p></div>

Best practices

  • Support and prefix requirements vary, so test the target browser. Fragment decoration is not a substitute for a real padded block when the content should be one panel. Avoid highlights that reduce line readability or obscure adjacent text.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading