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

Свойство page-break-inside управляет тем, происходит ли разрыв страницы внутри элемента. Это свойство обычно используется для управления разрывами страниц внутри содержимого элемента при печати. Обратите внимание, что оно применяется только в контексте печатных носителей и не влияет на отображение на экране.

WARNING

Свойство page-break-inside заменено свойством break-inside. Современными альтернативами являются avoid-page и avoid-column для более точного управления разрывами страниц и колонок.

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

Начальное значение	auto
Применяется к	Блочные элементы.
Наследуется	Нет.
Анимация	Нет.
Версия	CSS2
Синтаксис DOM	`object.style.pageBreakInside = "avoid";`

Синтаксис

Синтаксис CSS page-break-inside

css

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

Пример кода ниже демонстрирует использование свойства page-break-inside:

Код CSS page-break-inside

css

@media print {
  p {
    page-break-inside: auto;
  }
}

Пример свойства `page-break-inside` со значением `avoid`:

Отдельные части страницы

html

<!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>

Try it Yourself »

Пример свойства `page-break-inside` со значением `auto`:

Пример свойства page-break-inside со значением "auto":

html

<!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>

Try it Yourself »

Значения

Значение	Описание
auto	Разрешает разрывы страниц внутри элемента.
avoid	Запрещает разрывы страниц внутри элемента.

Practice

Что делает CSS-свойство 'page-break-inside'?

Оно настраивает поведение разрыва страницы внутри блока.Оно определяет, как переносить строки текста внутри блока.Оно используется для разрыва страницы после HTML-элемента.Оно используется для предотвращения разрыва внутри элемента.Оно добавляет границу внутри элемента.

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

Синтаксис ​

Пример свойства page-break-inside со значением avoid: ​

Пример свойства page-break-inside со значением auto: ​