CSS-свойство page-break-inside
Свойство CSS page-break-inside задаёт разрыв страницы внутри указанного элемента. Узнайте значения этого свойства.
CSS-свойство page-break-inside управляет тем, разрешён ли разрыв страницы внутри элемента при печати документа. Разрыв страницы — это точка, где содержимое заканчивается на одной печатной странице и продолжается на следующей. Используйте это свойство, чтобы не допустить разбиения блока содержимого — абзаца, списка, рисунка или строки таблицы — на две страницы.
Свойство действует только в контекстах страничных медиа (печать, предварительный просмотр или сохранение в PDF). На обычном экране, где содержимое прокручивается непрерывно, а не разбивается на отдельные страницы, оно не имеет видимого эффекта.
Когда применять
Наиболее распространённый случай — page-break-inside: avoid, которое указывает браузеру держать элемент вместе на одной странице, не разбивая его. Типичные цели:
- Удержание заголовка вместе с последующим текстом.
- Предотвращение разрезания списка, блока кода или
<figure>пополам. - Сохранение строки таблицы, карточки или позиции счёта в неразрывном виде.
Если элемент выше целой страницы, браузер не может выполнить avoid — содержимое всё равно должно где-то прерваться, — но он начнёт элемент с новой страницы, чтобы как можно больше содержимого осталось вместе.
page-break-inside — устаревшее свойство CSS2. Современная замена — break-inside, которое работает для печатных страниц, многоколоночных макетов и регионов и поддерживает более точные значения, такие как avoid-page и avoid-column.
Для обратной совместимости браузеры трактуют page-break-inside как псевдоним break-inside, поэтому существующие сайты продолжают работать. В новом коде предпочтительно использовать break-inside.
| Начальное значение | auto |
|---|---|
| Применяется к | Блочным элементам. |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS2 |
| Синтаксис DOM | object.style.pageBreakInside = "avoid"; |
Синтаксис
page-break-inside: auto | avoid | initial | inherit;Поскольку свойство имеет значение только при печати, его обычно помещают внутрь правила @media print, чтобы оно не влияло на экранный макет:
@media print {
/* Don't split tables or figures across pages */
table,
figure {
page-break-inside: avoid;
}
}Примеры
page-break-inside со значением avoid
Здесь каждому абзацу, списку и секции .list предписано оставаться на одной странице. При печати документа (или в режиме предварительного просмотра) браузер будет избегать разбиения любого из этих блоков на границе страницы.
<!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 {
page-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>
<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>page-break-inside со значением auto
auto — начальное значение, которое восстанавливает поведение по умолчанию: браузер может вставлять разрыв страницы внутри элемента там, где это необходимо. Явная установка этого значения полезна для переопределения унаследованного или более раннего правила avoid для конкретного элемента.
<!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 {
page-break-inside: auto;
}
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>
<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 | По умолчанию. Разрешает разрыв страницы внутри элемента при необходимости. |
avoid | Избегает вставки разрыва страницы внутри элемента, сохраняя его целым по возможности. |
initial | Устанавливает свойство в значение по умолчанию (auto). |
inherit | Наследует значение от родительского элемента. |
Связанные свойства
page-break-inside входит в семейство свойств фрагментации, управляющих разрывами при печати:
page-break-beforeиpage-break-after— принудительно вставляют или запрещают разрыв до или после элемента.break-insideиbreak-before— современные, более функциональные замены, которые также работают с многоколоночными макетами.
Разрывы страниц тесно взаимодействуют с многоколоночными макетами, создаваемыми свойствами columns и column-width.
Поддержка браузерами
page-break-inside поддерживается во всех основных браузерах, однако поддержка значения avoid при печати исторически была непоследовательной. Для наиболее надёжных результатов в новых проектах используйте break-inside: avoid — браузеры автоматически сопоставляют его с page-break-inside.