CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

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.

ValuesDescription
autoThis value is used as a default value. It adds the page break inside any item if required.
avoidThis property value avoids the page break inside any item whenever possible.
initialThe initial value sets the page-break property to the default value.
inheritWhen 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:

 CSS Page-break-inside Attribute

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:

 CSS Page-break-inside Attribute



ADVERTISEMENT
ADVERTISEMENT