CSS page-break-inside property

The page-break-inside property is used to specify the page break should be avoided inside a specified element.We cannot use page-break-inside property on absolutely positioned elements.

CSS Syntax:

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

Property Values:

auto : Automatic page-breaks.
avoid : Avoid page-break inside the element.
initial : Property to its default value.
inherit : Property from its parent element.

Example :

<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 I2Tutorials</h2>
   </div>
   <div>
Enter content here.  Enter content here.  Enter content here.  Enter content here.  Enter content here.  Enter content here.  Enter content here.  Enter content here.  Enter content here.  Enter content here.     
</div>
   <br>
   <button onclick = "func()">Print this page</button>

   <script>
     function func() {
       window.print();
     }
   </script>

 </body>
</html>

OUTPUT:

CSS page-break-inside property