Свойство CSS `page-break-inside`

Свойство page-break-inside CSS управляет разрывами страниц внутри текущего элемента.

Попробуйте

page-break-inside: auto;

page-break-inside: avoid;

<div>
  <p>
    The effect of this property can be noticed when the document is being
    printed or a preview of a print is displayed.
  </p>
  <button id="print-btn">Show Print Preview</button>
  <div class="box-container">
    <div class="box">Content before the property</div>
    <div class="box" id="example-element">Content with 'page-break-inside'</div>
    <div class="box">Content after the property</div>
  </div>
</div>

.box {
  border: solid #5b6dcd 5px;
  background-color: #5b6dcd;
  margin: 10px 0;
  padding: 5px;
}

#example-element {
  border: solid 5px #ffc129;
  background-color: #ffc129;
  color: black;
}

@media print {
  #example-element {
    height: 25cm;
  }
}

const btn = document.getElementById("print-btn");

btn.addEventListener("click", () => {
  window.print();
});

Синтаксис

/* Keyword values */
page-break-inside: auto;
page-break-inside: avoid;

/* Global values */
page-break-inside: inherit;
page-break-inside: initial;
page-break-inside: revert;
page-break-inside: revert-layer;
page-break-inside: unset;

Значения

Это свойство задаётся одним из следующих ключевых слов:

auto

Начальное значение. Автоматические разрывы страниц (не принудительные и не запрещённые).

avoid

Запрещает разрывы страниц внутри элемента.

Псевдонимы разрывов страниц

Свойство page-break-inside теперь считается устаревшим и заменено свойством break-inside.

Для обеспечения совместимости браузеры должны рассматривать page-break-inside как псевдоним break-inside. Это гарантирует, что сайты, использующие page-break-inside, продолжат работать должным образом. Часть значений должна быть сопоставлена следующим образом:

Формальное определение

Формальный синтаксис

page-break-inside = 
  auto |
  avoid

Примеры

Предотвращение разрывов страниц внутри элементов

HTML

<div class="page">
  <p>This is the first paragraph.</p>
  <section class="list">
    <span>A list</span>
    <ol>
      <li>one</li>
      <!-- <li>two</li> -->
    </ol>
  </section>
  <ul>
    <li>one</li>
    <!-- <li>two</li> -->
  </ul>
  <p>This is the second paragraph.</p>
  <p>This is the third paragraph, it contains more text.</p>
  <p>
    This is the fourth paragraph. It has a little bit more text than the third
    one.
  </p>
</div>

CSS

.page {
  background-color: #8cffa0;
  height: 90px;
  width: 200px;
  columns: 1;
  column-width: 100px;
}

.list,
ol,
ul,
p {
  break-inside: avoid;
}

p {
  background-color: #8ca0ff;
}

ol,
ul,
.list {
  margin: 0.5em 0;
  display: block;
  background-color: orange;
}

p:first-child {
  margin-top: 0;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• break-before, break-after, break-inside
• page-break-after, page-break-before
• orphans, widows