This page is being translated; the original is shown (Русский ).
Разрыв внутри элемента
Классы break-inside-* задают свойство break-inside: разрешают или
запрещают делить элемент между колонками или страницами. Берите их для
карточек, таблиц и рисунков в многоколоночном блоке
(layout-col-*
Пример
Целая карточка
Без класса высокая карточка 2 разрезана между колонками. С
break-inside-avoid или break-inside-avoid-column она переходит в
следующую колонку целиком.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 md:grid-col-3 gap-4 color-on-surface" >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >без класса</code >
<div class ="layout-col-2 col-gap-2 p-1 border border-dashed border-outline radius-ui" >
<div class ="m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui" >Карточка 1<br >строка<br >строка</div >
<div class ="m-bottom-1 p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >Карточка 2<br >строка<br >строка<br >строка<br >строка<br >строка</div >
<div class ="m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui" >Карточка 3<br >строка</div >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >break-inside-avoid на карточке 2</code >
<div class ="layout-col-2 col-gap-2 p-1 border border-dashed border-outline radius-ui" >
<div class ="m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui" >Карточка 1<br >строка<br >строка</div >
<div class ="m-bottom-1 p-1 bg-tertiary-container color-on-tertiary-container radius-ui break-inside-avoid" >Карточка 2<br >строка<br >строка<br >строка<br >строка<br >строка</div >
<div class ="m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui" >Карточка 3<br >строка</div >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >break-inside-avoid-column на карточке 2</code >
<div class ="layout-col-2 col-gap-2 p-1 border border-dashed border-outline radius-ui" >
<div class ="m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui" >Карточка 1<br >строка<br >строка</div >
<div class ="m-bottom-1 p-1 bg-tertiary-container color-on-tertiary-container radius-ui break-inside-avoid-column" >Карточка 2<br >строка<br >строка<br >строка<br >строка<br >строка</div >
<div class ="m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui" >Карточка 3<br >строка</div >
</div >
</div >
</div >
Классы
Класс
CSS
Значения
break-inside-autopage-break-inside: auto; -webkit-column-break-inside: auto; -moz-column-break-inside: auto; break-inside: auto—
break-inside-avoidpage-break-inside: avoid; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid—
break-inside-avoid-pagepage-break-inside: avoid; break-inside: avoid-page—
break-inside-avoid-column-webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid-column—
Условия (что это ): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:break-inside-auto.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Выбор значения
break-inside-avoid — не делить элемент ни между колонками, ни между
страницами.break-inside-avoid-column — не делить между колонками; при печати
страница может разрезать элемент.break-inside-avoid-page — не делить между страницами при печати; в
колонках элемент может разрезаться.break-inside-auto — решение за браузером; так элемент ведёт себя без
класса.
Карточки в колонках
HTML wrap_text Wrap source lines content_copy Copy
<div class ="layout-col-3" >
<article class ="break-inside-avoid" >Карточка 1</article >
<article class ="break-inside-avoid" >Карточка 2</article >
<article class ="break-inside-avoid" >Карточка 3</article >
</div >
Таблица при печати
HTML wrap_text Wrap source lines content_copy Copy
<table class ="break-inside-avoid-page" >
<!-- строки таблицы -->
</table >
Ограничения
Классы действуют только внутри многоколоночного блока или при печати.
Запрет разрыва — просьба к браузеру: элемент выше колонки или страницы всё
равно разрезается.
У семейства нет префиксов состояния.
См. также
Предыдущая Разрыв до элемента Следующая Колонки
