Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Controlling Pagination with CSS
The CSS pagination properties allow you to control how content breaks across pages when printing or creating PDFs. These properties help ensure your content flows logically and looks professional in print format.
Syntax
selector {
page-break-before: value;
page-break-after: value;
page-break-inside: value;
}
Possible Values
| Value | Description |
|---|---|
auto |
Default. Browser generates page breaks as needed |
always |
Forces a page break before or after the element |
avoid |
Avoids page breaks before, after, or inside the element |
left |
Forces page breaks to render element on a left-hand page |
right |
Forces page breaks to render element on a right-hand page |
Example: Chapter and Section Pagination
The following example demonstrates how to start chapters on right-hand pages and prevent section headers from being separated from their content −
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
page-break-before: right;
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
h2 {
page-break-after: avoid;
color: #34495e;
margin-top: 30px;
}
.chapter {
margin-bottom: 40px;
}
p {
line-height: 1.6;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="chapter">
<h1>Chapter 1: Introduction</h1>
<h2>Overview</h2>
<p>This section provides an overview of the topic. The h2 header will not be separated from this paragraph when printing.</p>
<h2>Getting Started</h2>
<p>This section explains the basics. Again, the header stays with its content.</p>
</div>
<div class="chapter">
<h1>Chapter 2: Advanced Topics</h1>
<h2>Complex Scenarios</h2>
<p>This chapter will start on a new right-hand page when printed.</p>
</div>
</body>
</html>
The document displays with styled headers. When printed, each h1 (chapter) will start on a new right-hand page, and h2 headers will not be separated from their following content.
Example: Avoiding Page Breaks Inside Elements
Use page-break-inside: avoid to keep content blocks together −
<!DOCTYPE html>
<html>
<head>
<style>
.important-box {
border: 2px solid #e74c3c;
padding: 20px;
margin: 20px 0;
background-color: #fdf2f2;
page-break-inside: avoid;
}
.code-block {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
padding: 15px;
font-family: monospace;
page-break-inside: avoid;
white-space: pre-wrap;
}
</style>
</head>
<body>
<p>This is regular paragraph content that can break across pages normally.</p>
<div class="important-box">
<h3>Important Notice</h3>
<p>This entire box will stay together when printing. It won't be split across pages due to the page-break-inside: avoid property.</p>
</div>
<div class="code-block">function example() {
console.log("This code block");
console.log("will not be split");
console.log("across page breaks");
}</div>
</body>
</html>
The page displays styled content boxes. When printed, the important box and code block will remain intact without being split across page boundaries.
Conclusion
CSS pagination properties provide essential control over print layouts. Use page-break-before and page-break-after to control where pages break, and page-break-inside to keep important content together.
Updated on: 2026-03-15T11:38:26+05:30
515 Views
Advertisements