search
Разрыв внутри элемента (break-inside)
https://dev.ru.simai.io/ru/ui/utility/layout-break/break-inside.php
Модификатор break-inside в SIMAI Framework позволяет контролировать разрывы столбца или страницы внутри элемента. Это
особенно полезно при работе со сложными макетами или документами, где требуется точный контроль над тем, как контент
распределяется по колонкам или страницам.
Синтаксис
Использование: {контрольная точка}:{модификатор} или просто {модификатор}
-
Контрольная точка (необязательный параметр):
Применяет модификатор начиная с определённого размера области просмотра (sm,md,lg,xl).
Если не указана, модификатор действует для всех размеров области просмотра. -
Модификатор (обязательный параметр):
break-inside-auto— автоматический разрыв внутри элемента.break-inside-avoid— отмена разрыва внутри элемента.break-inside-avoid-page— отмена разрыва страницы внутри элемента.break-inside-avoid-column— отмена разрыва колонки внутри элемента.
Пример
Использование break-inside-avoid-column для предотвращения разрыва колонки внутри элемента:
<div class="layout-col-2">
<p>Что ж, позволь мне кое-что тебе сказать, ...</p>
<p class="break-inside-avoid-column">Конечно, смейтесь...</p>
<p>Может быть, мы сможем жить без...</p>
<p>Смотреть. Если вы думаете, что это...</p>
</div>
В этом примере абзац с break-inside-avoid-column не будет разрываться по колонкам, обеспечивая более целостное
отображение содержимого.
Адаптивность
Чтобы модификатор начал действовать только с определённого размера области просмотра, добавьте префикс контрольной
точки. Например, md:break-inside-avoid-column заставит применять модификатор только на экранах с размером Medium и
больше:
<div class="md:break-inside-avoid-column"></div>
Таким образом, модификатор break-inside позволяет точно управлять разрывами внутри элементов, что упрощает адаптивную
верстку и улучшает читаемость контента.