CSS page-break-inside property
As the name implies, this CSS property is used to specify the page break inside the element, when printing the document. This CSS property cannot be used on absolutely positioned elements or an empty <div> element that does not generate a box. It inserts or avoids the page break inside the specified element during printing the document.
If we want to avoid the page break inside the images, list of items, code snippets, tables, then we can use the page-break-inside property.
This CSS property represents whether or not the page break is allowed inside the element's box. Including page-break-inside, the CSS properties page-break-before and page-break-after help us to define the behavior of the document when printed.
The brief explanation of the values of this CSS property is tabulated as follows.
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. This value neither prevents nor forces the page break inside the element's box.
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.Test it Now
Example - Using the avoid value
This value avoids the page break inside the element's box, if possible. Here, we are using a button to print the page. We have to click that button in order to see the effect.Test it Now