Разрыв внутри элемента

В SIMAI Framework с помощью модификатора можно управлять разрывом столбца или страницы внутри элемента или страницы.

Классы

Описание

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

Использование модификатора: {контрольная точка}:{модификатор}

• Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
• Модификатор. Обязательный параметр. Может принимать значения:
  • break-inside-auto - автоматический разрыв страницы или колонки внутри текущего элемента
  • break-inside-avoid - отмена разрыва страницы внутри текущего элемента;
  • break-inside-avoid-page - отмена разрыва страницы внутри текущего элемента;
  • break-inside-avoid-column - отмена разрыва колонки внутри текущего элемента.

Пример

С помощью модификатора break-inside-{значение} для управления разрывом столбца или страницы внутри элемента или страницы. Например, используйте модификатор break-inside-avoid-column для принудительного разрыва столбца

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

Адаптивность

Для управления разрывом стоблца или страницы после элемента, начиная с определенного размера области просмотра, добавьте к модификатору префикс контрольной точки (sm, md, lg, xl) через двоеточие (:).

Например, используйте модификатор md:break-inside-avoid-column для отображения фрагментов элемента как единое целое для экранов размером Medium и больше.

<div class="md:break-inside-avoid-column"></div>

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

Изменить статью