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

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

Попробуйте

page-break-after: auto;

page-break-after: 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-after'</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-after: auto;
page-break-after: always;
page-break-after: avoid;
page-break-after: left;
page-break-after: right;
page-break-after: recto;
page-break-after: verso;

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

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

Значения

auto

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

always

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

avoid

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

left

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

right

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

recto

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

verso

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

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

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

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

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

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

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

Примеры

Установка разрыва страницы после сносок

/* move to a new page after footnotes */
div.footnotes {
  page-break-after: always;
}

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

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

См. также

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