Свойство CSS page-break
Свойство CSS page-break объединяет три свойства: page-break-before, page-break-after и page-break-inside. Описание и примеры.
В спецификации CSS нет единого свойства page-break. Это название обозначает семейство трёх связанных свойств: page-break-before, page-break-after и page-break-inside. Вместе они управляют тем, где происходит разрыв страницы при отправке документа на принтер (или при сохранении в PDF), чтобы связанное содержимое оставалось вместе и заголовки, таблицы или изображения не разрывались между двумя листами.
Эти свойства действуют только в постраничных носителях — при печати или в режиме предварительного просмотра. На обычном экране они не оказывают видимого эффекта, поэтому их почти всегда задают внутри блока @media print. Они также не действуют на пустой <div> или на абсолютно позиционированные элементы.
На этой странице рассматриваются все три свойства, ситуации, в которых применяется каждое из них, а также современные замены, которые следует использовать в новом коде.
Когда это нужно?
Типичные случаи, когда необходимо управлять разрывами страниц:
- Начинать каждый раздел с новой страницы — например, принудительно вставлять разрыв страницы перед каждым
<h1>в длинном отчёте. - Удерживать блоки вместе — не давать таблице, рисунку или блоку кода разрываться между двумя страницами.
- Избегать «висячих» заголовков — заголовок, оказавшийся в самом низу страницы, а содержимое которого начинается на следующей, выглядит неправильно.
Современные замены: свойства break-*
Свойства page-break-* считаются устаревшими. Спецификация CSS Fragmentation заменила их более короткими break-before, break-after и break-inside, которые работают также в макетах с несколькими колонками и регионами, а не только при печати. Браузеры по-прежнему поддерживают старые имена для обратной совместимости и сопоставляют их с новыми, поэтому наиболее надёжный подход — объявлять оба варианта:
@media print {
h1 {
page-break-before: always; /* legacy */
break-before: page; /* modern equivalent */
}
}Далее на этой странице каждое устаревшее свойство показано рядом с его современным аналогом.
page-break-after
page-break-after добавляет разрыв страницы после элемента. Например, для завершения главы, чтобы следующая начиналась с нового листа:
Свойство page-break-after заменено свойством break-after.
Пример кода CSS page-break-after
@media print {
.chapter {
page-break-after: always;
/* modern equivalent: break-after: page; */
}
}page-break-before
page-break-before добавляет разрыв страницы перед элементом — удобно, чтобы каждый крупный заголовок начинался с новой страницы:
Свойство page-break-before заменено свойством break-before.
Пример кода CSS page-break-before
@media print {
h2 {
page-break-before: always;
/* modern equivalent: break-before: page; */
}
}Значения left и right полезны при двусторонней печати: они добавляют нужное количество разрывов, чтобы следующий элемент начинался соответственно на левой или правой странице.
page-break-inside
page-break-inside управляет тем, разрешён ли разрыв внутри элемента. Используйте avoid, чтобы таблица, рисунок или абзац не разрывались между двумя страницами. Принимает только значения auto и avoid.
Свойство page-break-inside заменено свойством break-inside.
Пример свойства break-inside:
В следующем примере используется современное свойство break-inside, которое заменяет устаревшее page-break-inside.
Пример свойств CSS page-break и break-inside|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 90px;
width: 200px;
columns: 1;
column-width: 80px;
}
.list,
ol,
ul,
p {
break-inside: avoid;
}
p {
background-color: #8ebf42;
}
ol,
ul,
.list {
margin: 0.5em 0;
display: block;
background-color: #1c87c9;
}
p:first-child {
margin-top: 1em;
}
</style>
</head>
<body>
<h2>Page-break property example</h2>
<div class="example">
<p>The first paragraph.</p>
<section class="list">
<span>A list</span>
<ol>
<li>one</li>
</ol>
</section>
<ul>
<li>one</li>
</ul>
<p>The second paragraph.</p>
<p>The third paragraph, it contains more text.</p>
<p>The fourth paragraph. It has a little bit more text than the third one.</p>
</div>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| auto | Браузер самостоятельно решает, где сделать разрыв. Значение по умолчанию. |
| always | Всегда принудительно вставлять разрыв страницы (до или после элемента). |
| avoid | Избегать разрыва страницы (до, после или внутри элемента). |
| left | Добавить один или два разрыва, чтобы следующее содержимое начиналось на левой странице. |
| right | Добавить один или два разрыва, чтобы следующее содержимое начиналось на правой странице. |
| initial | Устанавливает значение свойства по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Какие значения применимы к каждому свойству:
| Свойство | Допустимые значения |
|---|---|
page-break-before | auto, always, avoid, left, right |
page-break-after | auto, always, avoid, left, right |
page-break-inside | auto, avoid |
Связанные темы
break-after— современная заменаpage-break-after.break-inside— современная заменаpage-break-inside.@media— используется для применения стилей к печатному выводу с помощью@media print.columns— многоколоночный макет, где также полезноbreak-inside.