CSS page-break-inside property

As the name implies, this CSS property is used to specify the page break inside the element, when printing the document. This CSS property cannot be used on absolutely positioned elements or an empty <div> element that does not generate a box. It inserts or avoids the page break inside the specified element during printing the document.

If we want to avoid the page break inside the images, list of items, code snippets, tables, then we can use the page-break-inside property.

This CSS property represents whether or not the page break is allowed inside the element's box. Including page-break-inside, the CSS properties page-break-before and page-break-after help us to define the behavior of the document when printed.

Syntax

Possible values

The brief explanation of the values of this CSS property is tabulated as follows.

Values	Description
auto	It is the default value that inserts a page break inside the element, if necessary.
avoid	It is used to avoid a page break inside the element whenever possible.
initial	It sets the property to its default value.
inherit	If this value is specified, the corresponding element uses the computed value of its parent element page-break-inside property.

Let's understand the above values using an example of each.

Example - Using the auto value

The value auto is the default value that inserts a page break automatically when required. This value neither prevents nor forces the page break inside the element's box.

In this example, we are using the two <div> elements and a button. The button is responsible to print the page. After clicking on the button, we will see the effect of the value.

<html>
   <head> 
      <style type = "text/css">
         div{
		 font-size: 20px;
		 page-break-inside: auto;
		 }
      </style>
   </head>
   <body>
      <div>
	  <h2>Hello World!!</h2>
	  <h2>Welcome to the javaTpoint.com.</h2>
      </div>
      <div>
This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is committed to providing easy and in-depth tutorials on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.      
</div>
      <br>
      <button onclick = "func()">Print this page</button>
      
      <script>
         function func() {
            window.print();
         }
      </script>
      
   </body>
</html>

Test it Now

Output

Example - Using the avoid value

This value avoids the page break inside the element's box, if possible. Here, we are using a button to print the page. We have to click that button in order to see the effect.

<html>
   <head> 
      <style type = "text/css">
          div{
		 font-size: 20px;
		 page-break-inside: avoid;
		 }
      </style>
   </head>
   <body>
      <div>
	  <h2>Hello World!!</h2>
	  <h2>Welcome to the javaTpoint.com.</h2>
      </div>
      <div>
This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is committed to providing easy and in-depth tutorials on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.      
</div>
      <br>
      <button onclick = "func()">Print this page</button>
      
      <script>
         function func() {
            window.print();
         }
      </script>
      
   </body>
</html>

Test it Now

Output