Layout
Box Decoration Break
Style syntax for setting how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
š§This page is still under construction and some content may not be complete.
Overview [sr-only]
This text breaks across multiple lines.
<span class="box:slice">This text breaks across multiple lines.</span>Basic usage
Slice
Use box:slice to apply the background, border, border-image, box-shadow, clip-page, margin, and padding to the box as if it were one continuous fragment.
This text breaks across multiple lines.
<span class="box:slice">This text breaks across multiple lines.</span>Clone
Use box:clone to apply the background, border, border-image, box-shadow, clip-page, margin, and padding to each fragment independently.
This text breaks across multiple lines.
<span class="box:clone">This text breaks across multiple lines.</span>Conditionally apply
Apply styles in different states using selectors, media queries, etc.
<div class="box:slice:hover box:slice@sm box:slice@dark box:slice@print">ā¦</div>