Introduction to CSS page-break
The following article provides an outline for CSS page-break. Page breaking is an operation where it is defined where a web page will be split when it is printed. CSS provides functionality to define how the document will behave when it is printed. For page breaking CSS provides three main properties, these are page-break-before, page-break-after and page-break-inside. These properties can be applied to individual elements containing content on a web page. Then these properties will break down the page wherever this property has been applied while printing the web page. This property is important to apply whenever the content is supposed to be printed and it should be readable and display more like a book.
CSS page-break Properties
Given below are the CSS page-break properties:
1. page-break-before
This property adds page break before the element on which it is specified. This property cannot be used on empty div elements or elements positioned as absolute.
CSS Syntax:
page-break-before: auto | always | left | right | avoid | initial | inherit;
Values:
- auto: automatic page breaks. Default value.
- always: always page break before the element.
- left: insert page break before the element and format next page as left page.
- right: insert page break to before the element and format next page as right page.
- avoid: avoid page break before the element if possible.
- initial: set to default value.
- inherit: inherit property from parent of element.
Example:
Code:
<!DOCTYPE html>
<html>
<head>
<title>
CSS page break
</title>
<style>
.all-display{
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align :left;
padding-left : 20px;
padding-right: 15px;
height : auto;
width : auto;
}
.heading {
font-weight: bold;
font-size: 15px;
width: 95%;
}
.content1 > p, .content2 > p, .content3 > p {
border: 1px solid #ccc;
margin-top: 4px;
padding: 5px;
border-radius: 5px;
background-color: azure;
}
@media print {
.content2, .content3 {
page-break-before: always;
}
}
</style>
</head>
<body>
<div class = "all-display">
<div class = "heading">
<h2> CSS Page Break Example </h2>
</div>
<div class = "content1">
<h1> Paragraph 1 </h1>
<p>Globally standards incubate channels compliant scalable benefits before.
Quickly superior disseminate web deliverables applications whereas enabled .
Quickly vertical drive catalysts clicks-and-mortar for change before architectures. </p>
</div>
<div class = "content2">
<h1> Paragraph 2 </h1>
<p> Globally standards incubate channels compliant scalable benefits before.
Quickly superior disseminate web deliverables applications whereas enabled .
Quickly vertical drive catalysts clicks-and-mortar for change before architectures. </p>
</div>
<div class = "content3">
<h1> Paragraph 3 </h1>
<p> Globally standards incubate channels compliant scalable benefits before.
Quickly superior disseminate web deliverables applications whereas enabled .
Quickly vertical drive catalysts clicks-and-mortar for change before architectures.
</p>
</div>
</div>
</body>
</html>
Output:
Print Preview Page 1
Print Preview Page 2
Print Preview Page 3
We have applied page-break-before property to paragraph 1 and paragraph 2. This will print each paragraph content on each page.
2. page-break-after
This property adds page break after the element on which it is specified. This property cannot be used on empty div elements or elements positioned as absolute.
4.5 (4,071 ratings)
View Course
CSS Syntax:
page-break-after: auto | always | left | right | avoid | initial | inherit;
Values:
- auto: automatic page breaks. Default value.
- always: always page break after the element.
- left: insert page break after the element and format next page as left page.
- right: insert page break after the element and format next page as right page.
- avoid: avoid page break after the element if possible.
- initial: set to default value.
- inherit: inherit property from parent of element.
Example:
Code:
<!DOCTYPE html>
<html>
<head>
<title>
CSS page break
</title>
<style>
.all-display{
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
padding-right: 15px;
height : auto;
width : auto;
}
.heading {
font-weight: bold;
font-size: 15px;
width: 95%;
}
.content1 > p, .content2 > p, .content3 > p {
border: 1px solid #ccc;
margin-top: 4px;
padding: 5px;
border-radius: 5px;
background-color: azure;
}
@media print {
.content2 {
page-break-after: always;
}
}
</style>
</head>
<body>
<div class = "all-display">
<div class = "heading">
<h2> CSS Page Break Example </h2>
</div>
<div class = "content1">
<h1> Paragraph 1 </h1>
<p>Globally standards incubate channels compliant scalable benefits before.
Quickly superior disseminate web deliverables applications whereas enabled .
Quickly vertical drive catalysts clicks-and-mortar for change before architectures. </p>
</div>
<div class = "content2">
<h1> Paragraph 2 </h1>
<p> Globally standards incubate channels compliant scalable benefits before.
Quickly superior disseminate web deliverables applications whereas enabled .
Quickly vertical drive catalysts clicks-and-mortar for change before architectures. </p>
</div>
<div class = "content3">
<h1> Paragraph 3 </h1>
<p> Globally standards incubate channels compliant scalable benefits before.
Quickly superior disseminate web deliverables applications whereas enabled .
Quickly vertical drive catalysts clicks-and-mortar for change before architectures.
</p>
</div>
</div>
</body>
</html>
Output:
Print Preview Page 1
Print Preview Page 2
Output on a web page will be the same but as we have applied page-break-after property to the second paragraph and set a property to always, this will apply page break after the second paragraph and paragraph 3 will be displayed on the second page.
3. page-break-inside
This property tries to avoid the page break in the element on which it is specified. This property cannot be used on elements positioned as absolute.
CSS Syntax:
page-break-before: auto | avoid | initial | inherit;
Values:
- auto: automatic page breaks. Default value.
- avoid: avoid page break inside the element if possible.
- initial: set to default value.
- inherit: inherit property from parent of element.
Example:
Code:
<!DOCTYPE html>
<html>
<head>
<title>
CSS page break
</title>
<style>
.all-display{
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
padding-right: 15px;
height : auto;
width : auto;
}
.heading {
font-weight: bold;
font-size: 15px;
width: 95%;
}
.content1 > p, .content2 > p, .content3 > p {
border: 1px solid #ccc;
margin-top: 4px;
padding: 5px;
border-radius: 5px;
background-color: azure;
letter-spacing: 30px;
}
.content1, .content2, .content3 {
margin-top: 30px;
margin-bottom: 10px;
}
@media print {
.content1, .content2, .content3 {
page-break-inside: avoid;
}
}
</style>
</head>
<body>
<div class = "all-display">
<div class = "heading">
<h2> CSS Page Break Example </h2>
</div>
<div class = "content1">
<h1> Paragraph 1 </h1>
<p>Globally standards incubate channels compliant scalable benefits before.
Quickly superior disseminate web deliverables applications whereas enabled .
Quickly vertical drive catalysts clicks-and-mortar for change before architectures. </p>
</div>
<div class = "content2">
<h1> Paragraph 2 </h1>
<p> Globally standards incubate channels compliant scalable benefits before.
Quickly superior disseminate web deliverables applications whereas enabled .
Quickly vertical drive catalysts clicks-and-mortar for change before architectures. </p>
</div>
<div class = "content3">
<h1> Paragraph 3 </h1>
<p> Globally standards incubate channels compliant scalable benefits before.
Quickly superior disseminate web deliverables applications whereas enabled .
Quickly vertical drive catalysts clicks-and-mortar for change before architectures.
</p>
</div>
</div>
</body>
</html>
Output:
Print Preview Page 1
Print Preview Page 2
Here, we have adjusted CSS properties in such a way that the contents of the paragraph will split into multiple pages while printing it. Try to run this example without and with page-break-inside property and see the print preview output. In the second case, the print output will contain all paragraphs with all content on the same page.
Conclusion
Page break allows us to specify the breaks on elements while printing the page. We can also avoid page breaks inside. CSS provides mainly three properties to achieve this.
Recommended Articles
This is a guide to CSS page-break. Here we discuss the introduction to CSS page-break along with properties explained in detail. You may also have a look at the following articles to learn more –
