w3docs logo

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

Свойство page-break-inside устанавливает разрыв страницы внутри элемента.

Это свойство не может быть использовано для пустого <div> элемента или абсолютно позиционированного элемента.

Свойство page-break-inside заменено на break-inside.
Значение по умолчанию auto
Применяется К блочным элементам.
Наследуется Нет
Анимируемое Нет
Версия CSS2
DOM синтаксис object.style.pageBreakInside = "Avoid";

Синтаксис

page-break-inside: auto | avoid | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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: 1;
      }
    </style>
  </head>
  <body>
    <div class="example">
      <p>Первый параграф.</p>
      <section class="list">
        <span>A list</span>
        <ol>
          <li>one</li>
        </ol>
      </section>
      <ul>
        <li>one</li>
      </ul>
      <p>Второй параграф.</p>
      <p>Третий параграф, который содержит больше текста.</p>
      <p>Четвертый параграф. Он содержит больше текста, чем третий параграф.</p>
    </div>
  </body>
</html>

Значения

Значение Описание
auto Разрешает разрыв внутри элемента.
avoid Избегает разрыва внутри элемента.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
1.0+ 12.0+ 19.0+ 1.3+ 7.0+

Практикуйте свои знания

Что такое свойство CSS 'page-break-inside'?
Считаете ли это полезным?