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

Свойство CSS page-break-after управляет тем, принудительно ли вставляется разрыв страницы или он предотвращается после заданного элемента при печати документа или отображении в любом постраничном медиаконтексте (печать, экспорт в PDF, предварительный просмотр перед печатью). Разрыв страницы завершает текущую страницу и переносит следующее содержимое на новую страницу.

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

Свойство не оказывает видимого эффекта на экране; как правило, его помещают внутрь блока @media print, чтобы правила применялись только при печати документа. Оно не применяется к абсолютно позиционированным элементам.

Синтаксис

page-break-after: auto | avoid | always | left | right | initial | inherit;

Пример: начало каждого раздела с новой страницы

Распространённый вариант использования — принудительное начало каждого раздела верхнего уровня с отдельной печатной страницы. Примените page-break-after: always к каждому разделу, чтобы после него вставлялся разрыв:

@media print {
  .chapter {
    page-break-after: always;
  }
}

<div class="chapter">
  <h2>Chapter 1</h2>
  <p>...content...</p>
</div>
<div class="chapter">
  <h2>Chapter 2</h2>
  <p>...content...</p>
</div>

При печати Chapter 2 теперь начинается с верхней части страницы 2.

Пример: предотвращение разрыва после элемента

Используйте avoid, чтобы не допустить разрыва сразу после элемента — например, чтобы заголовок не оставался одиноким внизу страницы, оторванным от следующего за ним текста:

@media print {
  h2 {
    page-break-after: avoid;
  }
}

Совет: сочетайте с page-break-before и page-break-inside

page-break-after — одно из трёх связанных свойств. Используйте их вместе для полного контроля над макетами при печати:

• page-break-before — управляет разрывами перед элементом.
• page-break-inside — предотвращает разбивку элемента (таблицы или рисунка) на две страницы.

Значения

Значения left и right в основном полезны при двусторонней печати, когда нужно, чтобы раздел начинался с определённой стороны разворота.

Примечание: для современной веб-разработки вместо page-break-after используйте свойство break-after, поскольку page-break-after является устаревшим.

Практика