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

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

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

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

Синтаксис

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

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

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

@media print {
  h2 {
    page-break-before: always;
  }
}

<h2>Chapter 1</h2>
<p>Content of chapter one...</p>

<h2>Chapter 2</h2>
<p>Content of chapter two...</p>

При печати «Chapter 2» начнётся вверху новой страницы, даже если после «Chapter 1» осталось место на текущей странице.

Пример: принудительная левая или правая страница

Для двусторонних печатных документов (книг, отчётов) можно управлять тем, на какой стороне разворота начинается элемент. Используйте left или right, чтобы вынудить элемент начинаться с чётной или нечётной страницы:

@media print {
  .chapter-start {
    page-break-before: right; /* start on a right-hand (odd) page */
  }
}

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

Пример: подавление нежелательных разрывов

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

@media print {
  h2 + p {
    page-break-before: avoid;
  }
}

Обратите внимание, что avoid — это подсказка, а не гарантия. Если нет другого разумного места для разрыва страницы, браузер всё равно может его вставить.

Значения

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

Поддержка браузерами и особенности

• Все основные браузеры поддерживают auto, always и avoid. Поддержка left и right менее согласована в разных браузерах и средствах рендеринга PDF.
• Свойство игнорируется для строчных элементов и абсолютно или фиксированно позиционированных элементов. Используйте его для блочных элементов, таких как <div>, <section>, <h1>–<h6> или <p>.
• Установка page-break-before: always для каждого элемента списка или таблицы может привести к большому количеству коротких страниц. Применяйте его избирательно на границах логических разделов.
• page-break-before для дочернего элемента применяется к ближайшему блочному блоку, который он генерирует, — а не к родительскому контейнеру.

Совет: используйте совместно с другими свойствами page-break

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

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

Для современного кода перейдите на эквивалентные свойства фрагментации:

• break-before — заменяет page-break-before.
• break-after — заменяет page-break-after.
• break-inside — заменяет page-break-inside.

Ознакомьтесь с руководством @media print для советов по созданию полной таблицы стилей для печати, а также со свойствами orphans и widows для управления минимальным количеством строк абзаца, остающихся на странице до или после разрыва.

Практика