page-break-inside

Предупреждение: Это свойство заменено свойством break-inside.

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

Попробуйте

Синтаксис

/* 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	break-inside
`auto`	`auto`
`avoid`	`avoid`

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

Начальное значение	`auto`
Применяется к	блочным элементам в обычном потоке корневого элемента. Веб-агенты также могут применять его к другим элементам, таким как `table-row` элементы.
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	дискретный

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

page-break-inside = 
  avoid    |
  auto     |
  inherit

Примеры

Избежание разрывов страниц внутри элементов

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;
}

Результат

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

Спецификация
CSS Модуль разворота страниц Уровень 3 # page-break-inside

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`page-break-inside`	1	12	19	7	1.3	18	19	14	1	1.0	4.4
`auto`	1	12	19	15	1.3	18	19	14	1	1.0	4.4
`avoid`	1	12	19 До Firefox 25, `page-break-inside: avoid` не работало с высотой блока.	15	1.3	18	19 До Firefox 25, `page-break-inside: avoid` не работало с высотой блока.	14	1	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside