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

Свойство page-break-before CSS задаёт разрывы страниц перед текущим элементом.

Это свойство применяется к блочным элементам, создающим блок. Оно не применяется к пустому элементу <div>, который не создаёт блок.

Попробуйте

page-break-before: auto;

page-break-before: always;

<div>
  <p>
    The effect of this property can be noticed when the document is being
    printed or a preview of a print is displayed.
  </p>
  <button id="print-btn">Show Print Preview</button>
  <div class="box-container">
    <div class="box">Content before the property</div>
    <div class="box" id="example-element">Content with 'page-break-before'</div>
    <div class="box">Content after the property</div>
  </div>
</div>

.box {
  border: solid #5b6dcd 5px;
  background-color: #5b6dcd;
  margin: 10px 0;
  padding: 5px;
}

#example-element {
  border: solid 5px #ffc129;
  background-color: #ffc129;
  color: black;
}

const btn = document.getElementById("print-btn");

btn.addEventListener("click", () => {
  window.print();
});

Синтаксис

/* Keyword values */
page-break-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;
page-break-before: recto;
page-break-before: verso;

/* Global values */
page-break-before: inherit;
page-break-before: initial;
page-break-before: revert;
page-break-before: revert-layer;
page-break-before: unset;

Значения

Это свойство задаётся одним из следующих ключевых значений:

auto

Начальное значение. Автоматические разрывы страниц (не принудительные и не запрещённые).

always

Всегда принудительно создавать разрыв страницы перед элементом.

avoid

Избегать разрывов страниц перед элементом.

left

Принудительно создавать разрыв страницы перед элементом, чтобы следующая страница была оформлена как левая. Это страница, расположенная слева от корешка книги, или оборотная сторона листа при двусторонней печати.

right

Принудительно создавать разрыв страницы перед элементом, чтобы следующая страница была оформлена как правая. Это страница, расположенная справа от корешка книги, или лицевая сторона листа при двусторонней печати.

recto

Если страницы идут слева направо, это действует как right. Если страницы идут справа налево, это действует как left.

verso

Если страницы идут слева направо, это действует как left. Если страницы идут справа налево, это действует как right.

Псевдонимы для разрывов страниц

Свойство page-break-before теперь является устаревшим свойством и заменено на break-before.

Для обеспечения совместимости браузеры должны считать page-break-before псевдонимом break-before. Это гарантирует, что сайты, использующие page-break-before, продолжат работать так, как задумано. Некоторые значения должны считаться псевдонимами следующим образом:

Формальное определение

Формальный синтаксис

page-break-before = 
  auto |
  always |
  avoid |
  left |
  right |
  recto |
  verso

Примеры

Как избежать разрыва страницы перед элементом

/* Avoid page break before div elements of class note */
div.note {
  page-break-before: avoid;
}

Спецификации

Совместимость с браузерами

См. также

• break-before, break-after, break-inside
• page-break-after, page-break-inside
• orphans, widows