Свойство break-before CSS

Определение и использование

Атрибут break-before определяет, должно ли происходить разрыв страницы (page-break), разрыв колонки (column-break) или разделение области (region-break) перед указанным элементом.

Атрибут break-before расширяет атрибут page-break-before CSS2.

Используя break-before, вы можете сообщить браузеру о том, что перед элементом, на котором применен атрибут break-after, необходимо прервать страницу, колонку или область, или избежать разрыва элемента и перехода на другую страницу.

Пример

Всегда вставляйте разрыв страницы перед элементом <h1>:

@media print {
  h1 {
    break-before: always;
  }
}

CSS грамматика

break-before: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;

Значение атрибута

Значение Описание
auto По умолчанию. Автоматически выполняется разрыв страницы, колонки и раздела перед элементом.
all Всегда вставляйте знак разрыва страницы (page-break) перед основным блоком.
always Всегда вставляйте знак разрыва страницы (page-break) перед элементом.
avoid Избегайте разрыва страниц, колонок и регионов перед элементом.
avoid-column Избегайте разделения колонок перед элементом.
avoid-page Избегайте разрыва страницы перед элементом.
avoid-region Избегайте разделения перед элементом.
column Всегда вставляйте символ разрыва колонки перед элементом.
left Вставьте один или два знака разрыва страницы перед элементом, чтобы следующая страница была отформатирована как левая страница.
page Всегда вставляйте знак разрыва страницы перед элементом.
recto Вставьте один или два знака разрыва страницы перед основным блоком, чтобы следующая страница была отформатирована как recto.
region Всегда вставляйте разделитель перед элементом.
right Вставьте один или два знака разрыва страницы перед элементом, чтобы следующая страница была отформатирована как правая страница.
verso Вставьте один или два знака разрыва страницы перед основным блоком, чтобы следующая страница была отформатирована как verso.
initial Установите это свойство в его значение по умолчанию. См. также: initial.
inherit Инherit от родительского элемента. См. также: inherit.

Технические детали

Значение по умолчанию: auto
Инherit: Нет
Создание анимации: Не поддерживается. См. также:Свойства анимации.
Версия: CSS3
JavaScript синтаксис: object.style.breakBefore="always"

Более примеров

Пример

Чтобы убедиться, что все новые главы должны начинаться с правильной страницы (например, в книге), вы можете использовать break-before: для всех элементов <h1>:

@media print {
  h1 {
    break-before: right;
  }
}

Пример

Всегда вставляйте region-break: перед <ul> в region;

.region ul {
    break-before: region;
  }
}

поддержка браузерами

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

Chrome IE / Edge Firefox Safari Opera
50.0 10.0 65.0 10.0 37.0