盒子裝飾分割box-decoration-break

Setting how an element's fragments should be rendered when broken across multiple lines, columns, or pages.

Overview

Examples

Slice

Use box-decoration-break:slice when inline fragments should share one continuous background, border, shadow, and decoration.

<span class="box-decoration-break:slice bg:blue-60/.12">    Wrapped inline text</span>

@layer utilities {    .box-decoration-break\:slice {        -webkit-box-decoration-break: slice;        box-decoration-break: slice    }}

Clone

Use box-decoration-break:clone when each wrapped line should get its own background, border, shadow, and decoration.

<span class="box-decoration-break:clone bg:blue-60/.12 px:1x">    Wrapped inline text</span>

Use on inline content

This property is most visible when inline content wraps across multiple lines.

<span class="box-decoration-break:clone bg:blue-5">    A highlighted phrase that can wrap</span>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<span class="box-decoration-break:clone:hover box-decoration-break:slice@sm box-decoration-break:slice@print">...</span>