/    /  CSS page-break-after property

CSS page-break-after property

 

The page-break-after property used to add a page-break after a specified element.we cannot use this property on an empty <div> or on absolutely positioned elements.

 

CSS Syntax:

 

page-break-after: auto|always|avoid|left|right|initial|inherit;

 

Property Values:

 

  • auto : Automatic page-break.
  • always: Page-break after the element.
  • avoid : Page-break after the element.
  • left : The next page is formatted as a left page.
  • right : The next page is formatted as a right page.
  • 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-after: 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: