1. Макет
  2. box-decoration-break

Макет

box-decoration-break

Утилиты для управления тем, как фрагменты элемента должны отображаться при переносе на несколько строк, столбцов или страниц.

ClassStyles
box-decoration-clone
box-decoration-break: clone
box-decoration-slice
box-decoration-break: slice

Примеры

Базовый пример

Используйте утилиты box-decoration-slice и box-decoration-clone для управления тем, должны ли такие свойства как фон, граница, border-image, box-shadow, clip-path, margin и padding отображаться так, как будто элемент является одним непрерывным фрагментом или отдельными блоками:

box-decoration-slice

Привет
Мир

box-decoration-clone

Привет
Мир
<span class="box-decoration-slice bg-linear-to-r from-indigo-600 to-pink-500 px-2 text-white ...">  Привет<br />Мир</span><span class="box-decoration-clone bg-linear-to-r from-indigo-600 to-pink-500 px-2 text-white ...">  Привет<br />Мир</span>

Адаптивный дизайн

Префикс a box-decoration-break утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<div class="box-decoration-clone md:box-decoration-slice ...">  <!-- ... --></div>

Подробнее об использовании вариантов читайте в документации по вариантам.

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков