This is an important message requiring you to make a choice if you're based in the EU.

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


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


<!DOCTYPE html>
    <title>Title of the document</title>
      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;
    <div class="example">
      <p>The first paragraph.</p>
      <section class="list">
        <span>A list</span>
      <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>


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.

Browser support

1.0+ 12.0+ 19.0+ 1.3+ 7.0+

Practice Your Knowledge

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

Do you find this helpful?

Related articles