As its name suggests, this CSS attribute is employed to define the page break behavior within an element when the document is being printed. This CSS attribute cannot be applied to elements that are absolutely positioned or to an empty <div> element that does not result in a box being generated. It either inserts or prevents a page break within the designated element when the document is being printed.
If the goal is to prevent page breaks within images, lists, code blocks, or tables, the page-break-inside property can be employed.
This CSS attribute signifies if a page break can occur within the box of the element. Along with page-break-inside, the CSS attributes page-break-before and page-break-after are instrumental in specifying the document's behavior during printing.
Syntax
page-break-inside: auto | 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 inside the element, if necessary. |
| avoid | It is used to avoid a page break inside the element whenever possible. |
| 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-insideproperty. |
Let's understand the above values using an example of each.
Example - Using the auto value
The default value "auto" automatically inserts a page break when necessary without preventing or forcing it inside the box of the element.
In this instance, we are employing the pair of <div> components along with a button. The button has the task of triggering 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-inside: 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 avoid value
This setting prevents the element's container from being split across different pages whenever feasible. In this scenario, a button is implemented to trigger the printing of the page, requiring user interaction to observe the outcome.
<html>
<head>
<style type = "text/css">
div{
font-size: 20px;
page-break-inside: avoid;
}
</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