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.
📦box-decoration-break Visualizer
This is an example of an inline element that wraps.
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.
