CSS page-break Property

❮ Prev Next ❯

In fact, there is not a page-break property in the CSS specification. It is a set of three properties: page-break-inside, page-break-before, and page-break-after. These properties define the behavior of the document when printed. None of them can be used on an empty <div> or on absolutely positioned elements.

Page-break-after

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

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

Use the code example below to define page break after the element:

@media print {
  footer {
    page-break-after: left;
  }
}

Page-break-before

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

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

Use the code example below to define page break before the element:

@media print {
  h2 {
    page-break-before: right;
  }
}

Page-break-inside

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

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

Example of the break-inside property:

<!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>
    <h2>Page-break property example</h2>
    <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 »

Values

Value	Description
auto	Automatic page-break. This is the default value.
always	Always force a page break after the element.
avoid	Avoid a page-break after the element.
left	Force a page-break after the element, so that the following page is formatted as a left page.
right	Force a page-break after the element, so that the following page is formatted as a right page.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.