page-break-inside CSS

Become a Patron!

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

Значение по умолчанию:

auto

Наследуется:
Нет
Применяется:

К блочным элементам

Анимируется:
Нет
Спецификации:
Поддержка браузерами:

Can I Use css-page-break? Data on support for the css-page-break feature across the major browsers from caniuse.com.

Синтаксис

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

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

Значения

  • auto — Вставляет разрыв страницы при необходимости.
  • avoid — Запрещает разрыв страницы внутри элемента.

Примеры

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>page-break-inside</title>
  <style>
   @media print {
    p {
     page-break-inside: avoid;
    } 
   } 
  </style>
 </head>
 <body>
  <h2>Мусорные пакеты</h2>
  <p>История о том, как однажды мусорных пакетов оказалось несколько больше,  
     чем хотелось, как и для чего их можно использовать, и что из этого 
     получилось.</p>
  <p class="more">Читать дальше</p>
 </body>
</html>