📦box-decoration-break Visualizer
This is an example of an inline element that wraps onto multiple lines.
When an inline element like a `<span>` wraps onto multiple lines, how should its background and border be rendered? The `box-decoration-break` property gives you control over this. This tool visually demonstrates the difference between `slice` (the default) and `clone`, helping you understand how to style multi-line text elements. You can edit the text to force it to wrap exactly how you want.
Frequently Asked Questions
What is the difference between 'slice' and 'clone'?
'slice' treats the element as if it were rendered as a single box and then sliced at the line breaks. 'clone' treats each line fragment as its own box, applying padding and borders to each fragment independently.
Why use this property?
It is extremely useful for creating 'highlight' effects on text that spans multiple lines, ensuring the background color and padding look consistent on every line.
