page-break-after CSS

Become a Patron!

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

Значение по умолчанию:

auto

Наследуется:
Нет
Применяется:

К блочным элементам

Анимируется:
Нет
Спецификации:
Поддержка браузерами:

Can I Use css-page-break? Data on support for the css-page-break feature across the major browsers from caniuse.com.

Синтаксис

/* 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: unset;

Значения

  • always — Всегда добавляет разрыв страницы после элемента.
  • auto — Вставляет разрыв страницы при необходимости.
  • avoid — Запрещает разрыв страницы после элемента.
  • left — Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была четной.
  • right — Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была нечетной.

Примеры

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>page-break-after</title>
  <style>
   @media print {
    .more {
     page-break-after: always;
    } 
   } 
  </style>
 </head>
 <body>
  <h2>Мусорные пакеты</h2>
  <p>История о том, как однажды мусорных пакетов оказалось несколько больше,  
     чем хотелось, как и для чего их можно использовать, и что из этого получилось.</p>
  <p class="more">Читать дальше</p>
 </body>
</html>