As the name implies, this CSS property is used to add the page break before the element, when printing the document. It inserts a page break before the specified element during printing the document. We cannot use this CSS property on absolutely positioned elements or an empty <div> element that does not generate a box.
This CSS attribute indicates if the element's box can be broken before a page. Along with page-break-before, the CSS attributes page-break-after and page-break-inside enable us to specify how the document behaves during printing.
Syntax
page-break-before: auto | always | left | right | avoid | initial | inherit;
Possible values
The concise overview 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 before the element, if necessary. |
| always | This value always forces a page break before the specified element. |
| avoid | It is used to avoid a page break before the element whenever possible. |
left |
This value forces either one or two page breaks before the element so that the next page will be depicted as the left-hand page. |
| right | Therightvalue forces either one or two page breaks before the 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 elementpage-break-beforeproperty. |
Let's understand the above values using an example of each.
Example - Using the auto value
The default value "auto" is responsible for automatically inserting a page break when necessary. In this instance, we are incorporating two <div> elements along with a button. The button's function is to initiate the printing of the page. Upon clicking the button, the impact of the value will become visible.
<html>
<head>
<style type = "text/css">
div{
font-size: 20px;
page-break-before: 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 particular setting always mandates the insertion of a page break, regardless of necessity. A button is utilized to initiate the printing process, necessitating a manual click to observe the outcome.
In this instance, the page break is positioned prior to the <div> element to ensure that the button does not span across pages. Alternatively, if the page break is placed after this element, a new page will start after the <div> element, resulting in the button being displayed on the subsequent page.
<html>
<head>
<style type = "text/css">
div{
font-size: 20px;
page-break-before: 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 value dictates the insertion of one or two page breaks to ensure that the formatting of the subsequent page mirrors that of the left-hand page.
<html>
<head>
<style type = "text/css">
div{
font-size: 20px;
page-break-before: 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
Forcing the value right will result in the insertion of one or two page breaks, ensuring that the formatting of the subsequent page mirrors the layout of the right page.
<html>
<head>
<style type = "text/css">
div{
font-size: 20px;
page-break-before: 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