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]

ClassDeclarations
box-decoration-break:type / box:typebox-decoration-break: type; -webkit-box-decoration-break: type
box:slicebox-sizing: slice
box:clonebox-sizing: clone
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>
PREVIOUS
User Select

Style syntax for controlling whether the user can select text.

NEXT
Break After

Style syntax for controlling how page, column, or region breaks should occur after an element.

MIT License © Aoyue Design LLC.