CSS page-break-after property

This CSS property is used to adjust the page break after the element when printing the document. It inserts a page break after the specified element during printing. We cannot use this property on absolutely positioned elements (position: absolute;) or an empty <div> element that does not generate a box.

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

Syntax

Possible values

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

Values	Description
auto	It is the default value that inserts a page break after the element, if necessary.
Always	It always forces a page break after the specified element.
avoid	It is used to avoid a page break after the element whenever possible.
left	It forces either one or two page breaks after the specified element so that the next page will be depicted as the left-hand page.
right	It forces either one or two page breaks after the specified element so that the next page will be depicted as the right-hand page.
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.

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. 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-after: auto;   }        </style>     </head>     <body>        <div>    <h2>Hello World!!</h2>    <h2>Welcome to the  tutoraspire.com.</h2>        </div>        <div>  This site is developed so that students may learn computer science related technologies easily. The  tutoraspire.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

CSS page-break-after property

Example – Using the always value

This value always forces to insert a page break whether it is required or not. We are using a button for printing 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-after: always;   }        </style>     </head>     <body>        <div>    <h2>Hello World!!</h2>    <h2>Welcome to the  tutoraspire.com.</h2>        </div>        <div>  This site is developed so that students may learn computer science related technologies easily. The  tutoraspire.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

CSS page-break-after property

Example – Using the left value

The value left forces to insert one or two page breaks, so that the formatting of the next-page will be as the left page.

  <html>     <head>         <style type = “text/css”>           div{   font-size: 20px;   page-break-after: left;   }        </style>     </head>     <body>        <div>    <h2>Hello World!!</h2>    <h2>Welcome to the  tutoraspire.com.</h2>        </div>        <div>  This site is developed so that students may learn computer science related technologies easily. The  tutoraspire.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

CSS page-break-after property

Example – Using the right value

The value right forces to insert one or two page breaks, so that the formatting of the next-page will be as the right page.

  <html>     <head>         <style type = “text/css”>           div{   font-size: 20px;   page-break-after: right;   }        </style>     </head>     <body>        <div>    <h2>Hello World!!</h2>    <h2>Welcome to the  tutoraspire.com.</h2>        </div>        <div>  This site is developed so that students may learn computer science related technologies easily. The  tutoraspire.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

CSS page-break-after property

Next TopicCSS content property

CSS page-break-after property

CSS page-break-after property

Syntax

Possible values

Example – Using the auto value

Example – Using the always value

Example – Using the left value

Example – Using the right value

CSS min-width property

External CSS

You may also like