1. Макет
  2. break-before

Макет

break-before

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

ClassStyles
break-before-auto
break-before: auto;
break-before-avoid
break-before: avoid;
break-before-all
break-before: all;
break-before-avoid-page
break-before: avoid-page;
break-before-page
break-before: page;
break-before-left
break-before: left;
break-before-right
break-before: right;
break-before-column
break-before: column;

Примеры

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

Используйте утилиты вроде break-before-column и break-before-page для управления тем, как должен вести себя разрыв столбца или страницы перед элементом:

<div class="columns-2">  <p>Ну, позвольте мне рассказать вам кое-что, ...</p>  <p class="break-before-column">Конечно, давайте, смейтесь...</p>  <p>Может быть, мы можем жить без...</p>  <p>Смотрите. Если вы думаете, что это...</p></div>

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

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

<div class="break-before-column md:break-before-auto ...">  <!-- ... --></div>

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

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