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 attribute indicates if the page should be allowed to break after the box of the specified element. Along with page-break-after, the CSS attributes page-break-before and page-break-inside enable us to specify how the content should behave during printing.
Syntax
page-break-after: auto | always | left | right | avoid | initial | inherit;
Possible values
The concise summary of the values associated with this CSS attribute is presented in the table below.
| 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" serves as the default setting that automatically inserts a page break as needed. Within this instance, we are incorporating two <div> elements alongside a button. The button's function is to initiate the printing of the page. Upon clicking the button, the impact of this value will become apparent.
<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 C# Tutorial.</h2>
</div>
<div>
This site is developed so that students may learn computer science related technologies easily. The C# Tutorial 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>
Output
Example - Using the always value
This setting consistently enforces the inclusion of a page break, regardless of necessity. Our current approach involves utilizing a button to initiate the printing process, requiring us to activate the button to observe the outcome.
<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 C# Tutorial.</h2>
</div>
<div>
This site is developed so that students may learn computer science related technologies easily. The C# Tutorial 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>
Output
Example - Using the left value
The left margin value determines the necessity of adding one or two page breaks to ensure that the subsequent page maintains the same formatting as the preceding one.
<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 C# Tutorial.</h2>
</div>
<div>
This site is developed so that students may learn computer science related technologies easily. The C# Tutorial 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>
Output
Example - Using the right value
The right value enforces the insertion of either one or two page breaks to ensure that the subsequent page maintains the formatting of the right-hand 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 C# Tutorial.</h2>
</div>
<div>
This site is developed so that students may learn computer science related technologies easily. The C# Tutorial 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>
Output