Свойство CSS page-break
На самом деле, в спецификации CSS нет свойства page-break. Это набор из трёх свойств: page-break-inside, page-break-before и page-break-after. Эти свойства определяют поведение документа при печати. Ни одно из них нельзя применять к пустым тегам <div> или к элементам с абсолютным позиционированием.
page-break-after
Свойство page-break-after определяет разрыв страницы после элемента.
WARNING
Свойство page-break-after заменено свойством break-after.
Пример кода для определения разрыва страницы после элемента:
Пример кода CSS page-break-after
@media print {
footer {
page-break-after: left;
/* modern equivalent: break-after: left; */
}
}page-break-before
Свойство page-break-before определяет разрыв страницы перед элементом.
WARNING
Свойство page-break-before заменено свойством break-before.
Пример кода для определения разрыва страницы перед элементом:
Пример кода CSS page-break-before | W3Docs
@media print {
h2 {
page-break-before: right;
/* modern equivalent: break-before: right; */
}
}page-break-inside
Свойство page-break-inside определяет разрыв страницы внутри элемента.
WARNING
Свойство 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>Значения
| Value | Description |
|---|---|
| auto | Автоматический разрыв страницы. Это значение по умолчанию. |
| always | Всегда принудительно создавать разрыв страницы после элемента. |
| avoid | Избегать разрыва страницы после элемента. |
| left | Принудительно создавать разрыв страницы после элемента, чтобы следующая страница была оформлена как левая. |
| right | Принудительно создавать разрыв страницы после элемента, чтобы следующая страница была оформлена как правая. |
| initial | Заставляет свойство использовать значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Примечание: значения always, left и right применяются только к page-break-before и page-break-after. page-break-inside принимает только auto и avoid.
Практика
В чём заключается функция свойства 'page-break' в CSS?