/    /  CSS page-break-inside property

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