CSS page-break-inside Property

The page-break-inside property defines page break inside the element.

This property cannot be used on an empty <div> or on absolutely positioned elements.

The page-break-inside property is replaced by break-inside property.

Initial Value auto
Applies to Block-level elements.
Inherited No.
Animatable No.
Version CSS2
DOM Syntax object.style.pageBreakInside = "Avoid";

Syntax

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

Example

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

Values

Value Description
auto Allows to insert any page break inside the element.
avoid Avoids to insert any page inside the element.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.


Practice Your Knowledge

page-break-inside property doesn't have __ value.




Related articles