CSS page-break-after — розрив сторінки при друку

Властивість page-break-after додає розрив сторінки при друку документа після заданого елемента.

Ця властивість стосується елементів блоку, які генерують контейнер. Він не застосовуватиметься до порожнього <div> (або того, що абсолютно позиціований), який не генерує контейнер.

правити

Загальний опис

правити

Порада

Зауважте, що замість властивісті page-break-after можна використовувати більш загальну властивість break-after. Ця нова властивість також обробляє переривання стовпців та регіонів і є синтаксично більш сумісною з перериванням сторінки. Перш ніж використовувати page-break-after, перевірте, чи можна використовувати замість неї break-after. У майбутньому page-break-after використовуватиметься все рідше на користь break-after.

автор: Svitlana правити

Нотатка

Браузери Firefox, Chrome и Safari не підримують значення avoid, left i right.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

Властивість page-break-after може отримувати 7 значень:

auto

Вставляє розрив сторінки при необхідності

автор: Svitlana

правити

always

Завжди додає розрив сторінки після елемента

автор: Svitlana

правити

avoid

Забороняє розрив сторінки після елемента

автор: Svitlana

правити

left

Пропускає одну або дві сторінки після елемента, щоб наступна сторінка при друку була парною

автор: Svitlana

правити

right

Пропускає одну або дві сторінки після елемента, щоб наступна сторінка при друку була непарною

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивостей від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1.2	7	12	4
auto, always	1.0	1.0	1.2	7.0	12.0	4.0
avoid, left, right	1.0	Не підтримується	1.2	7.0	12.0	4.0

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1
auto, always	1.0		1.0	1.3
avoid, left, right	1.0		Не підтримується	1.3

Приклади

+ запропонувати свій приклад у пісочниці

<article>Вміст першого аркуша.</article>
<footer>Після цього футера — розрив сторінки в друці.</footer>
<article>Це вже другий аркуш.</article>

@media print {
    footer {
        page-break-after: always;
    }
}

<div class="cols">
    <p class="first">Перший абзац. Одразу після нього стоїть розрив, тому колонка на цьому й закінчується, хоч місця ще вдосталь.</p>
    <p>Другий абзац починається вже з нової колонки.</p>
    <p>Третій абзац просто продовжує другу колонку.</p>
</div>

.cols {
    columns: 2;
    column-gap: 24px;
}
p {
    margin: 0 0 10px;
    padding: 6px;
    background: #eef2f7;
}
.first {
    break-after: column;
    background: #cfe3ff;
}

<p>Вибери потрібне значення для <code>page-break-after</code>:</p>

<p><strong>Ця властивість може не підтримуватися Вашим браузером!</strong></p>

<p><em>Ця властивість впливає на елементи тільки під-час друку документа!</em></p>

<div class="inputs">
  <input id="auto" checked name="page-break-after" type="radio"/>
  <label for="auto">auto</label>
  <message for="auto">Ні вказує, ні забороняє переривання сторінки або стовпця.</message>
  
  <input id="avoid" name="page-break-after" type="radio"/>
  <label for="avoid">avoid</label>
  <message for="avoid">Уникання переривання сторінки після основного контейнера.</message>
  
  <input id="always" name="page-break-after" type="radio"/>
  <label for="always">always</label>
  <message for="always">Завжди додає розрив сторінки після елемента.</message>
  
  <input id="left" name="page-break-after" type="radio"/>
  <label for="left">left</label>
  <message for="left">Пропускає одну або дві сторінки після елемента, щоб наступна сторінка при друку була парною</message>
  
  <input id="right" name="page-break-after" type="radio"/>
  <label for="right">right</label>
  <message for="right">Пропускає одну або дві сторінки після елемента, щоб наступна сторінка при друку була непарною.</message>
</div>

<p id="message">Ні вказує, ні забороняє переривання сторінки або стовпця.</p>

<hr>

<div class="multicol">
  <h3 id="block">Заголовок</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>А це ще просто текст, не звертайте уваги на нього...</p>
</div>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: monospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}

p, h4 {
  margin-top: 0;
}

#form {
  padding: 8px 16px;
  font-size: 19px;
}

.multicol {
  background-color: lightyellow;
  padding: 10px;

  /* Safari and Chrome */
  -webkit-column-count: 3;
  -webkit-column-rule: 2px dotted coral;

  /* Firefox */
  -moz-column-count: 3; 
  -moz-column-rule: 2px dotted coral;

  /* CSS3 */
  column-count: 3; 
  column-rule: 2px dotted coral;
}

#block {
  page-break-after: auto;
}

#text {
  height: 60px;
  background-color: #eee;
  padding: 16px 0;
}

message {
  display: none;
}

const message = document.querySelector('#message');

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {

  var messageText = document.querySelector("message[for='" + this.id + "']");
  message.textContent = messageText?.textContent ?? '';

  document.querySelectorAll('#block').forEach((n) => n.style.setProperty('page-break-after', this.id));

}));

<h2>Приклад використання властивості</h2>

<p>Властивість <code>page-break-after</code> додає розрив сторінки при друку документа після заданого елемента. У цьому прикладі для наступного елементу встановлено правило <code>page-break-after: always;</code> (яке застосовується тільки під-час друку документа), що завжди додає розрив сторінки після зазначеного елемента.</p>

<p class="more">Читати далі...</p>

@media print {
  .more {
   page-break-after: always;
  }
}