CSS Page-break-inside Attribute

Page-break-inside Attribute

As its name implies, the page-break-before property is applied to include page break inside any element, at the time of printing any document. It adds the page break before any specified item at the time of printing a document. We do not apply this CSS attribute on the elements which are absolutely positioned or any empty <div> tag that can’t produce any box.

If we wish to deflect the page break inside a table, code snippet, item’s list, and image, we have applied this CSS property.

It illustrates that any page break can be permitted inside the box of an element or not. The CSS properties like page-break-before, page-break-inside, page-break-after support us to specify the document’s behavior when printed.

Syntax

page-break-inside:  auto | avoid | initial | inherit;  

Property Values

A tabulated form explanation of the above property values is as below.

Values	Description
auto	This value is used as a default value. It adds the page break inside any item if required.
avoid	This property value avoids the page break inside any item whenever possible.
initial	The initial value sets the page-break property to the default value.
inherit	When this property value is described, the corresponding item applies its parent item page break inside attribute computed value.

Let’s take examples of each value discussed above.

Example: auto

This value is used as a default value. It automatically includes the page break, if necessary. It does not force or prevent any page break inside any box of the element.

 In the following example, we will use a button and two <div> components. The button will be responsible for page printing. We will examine the value effect after clicking over the button.

<!DOCTYPE html>
<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 this Page. </h2>
</div>
<div>
This website is made for the students so that they can study various computer science concepts easily. This Website is devoted to give in-depth and easy tutorials on multiple technologies. Everyone can't be perfect in this entire world, and everything can't be best eternally. But we should try to be perfect.
</div>
<br>
<button onclick= "fun()">Print this page</button>
<script>
function fun()
{
 window.print();
}
</script>
</body>
</html>

Output:

Example: avoid

This property value deflects the page break inside any box of the element, if possible. We will use the button for page printing.

We will see the value effect after clicking over the button.

<!DOCTYPE html>
<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 this Page. </h2>
</div>
<div>
This website is made for the students so that they can study various computer science concepts easily. This Website is devoted to give in-depth and easy tutorials on multiple technologies. Everyone can't be perfect in this entire world, and everything can't be best eternally. But we should try to be perfect.
</div>
<br>
<button onclick= "fun()">Print this page</button>
<script>
function fun()
{
 window.print();
}
</script>
</body>
</html>

Output: