📄 CSS page-break-after — Controlling Printed Page Flow

The web isn’t just for screens — it prints too.

When preparing content for printing, one of the most useful but underused CSS tools is page-break-after. It gives you precise control over where a printed page ends, ensuring your layouts look professional, clean, and organized when printed.

---

🔹 What is page-break-after?

page-break-after tells the browser to insert a page break after an element when printing.

It only affects media of type print (i.e., when you’re printing a webpage or viewing it in a “print preview”).

---

📘 Syntax

selector {
  page-break-after: value;
}

🔧 Common values:

Value	Description
auto (default)	Automatic page breaks
always	Always insert a page break after the element
avoid	Avoid page break after the element if possible
left / right	Force break to start next page on a left or right page (booklets)

---

✍️ Example Use

<div class="section-1">
  <h2>Chapter 1</h2>
  <p>Content for chapter 1...</p>
</div>

<div class="section-2">
  <h2>Chapter 2</h2>
  <p>Content for chapter 2...</p>
</div>

.section-1 {
  page-break-after: always;
}

🖨️ In print preview: Chapter 2 starts on a new page.

---

🖼️ Image 1: Visual Flow for Print Layout

Description:
A two-page preview showing:

• Page 1 ends with “Chapter 1”
• Page 2 begins with “Chapter 2”
• A visual marker at the bottom of page 1 indicating a page break

🎯 Purpose: Illustrate how page-break-after: always splits the content cleanly.

---

🆚 Related Properties

Property	Use for…
page-break-before	Forcing a break before an element
page-break-after	Forcing a break after an element
page-break-inside	Avoiding breaks within elements

🔧 Combine them for precise control:

h2 {
  page-break-before: always;
}
table {
  page-break-inside: avoid;
}

---

🖼️ Image 2: Full Example Page with Multiple Sections

Description:
A print preview with three sections:

• Section 1 with page-break-after: always
• Section 2 starts at top of page 2
• Section 3 starts at top of page 3

🎯 Purpose: Show how page breaks organize long printed documents.

---

✅ When to Use page-break-after

• 📖 Printing books, chapters, or academic documents
• 🧾 Generating invoices or reports from HTML
• 📄 Separating sections in print-friendly newsletters or articles
• 🔍 Improving readability in printed material

---

🧠 Pro Tips

• Only works in print mode. Wrap rules in a @media print query:

@media print {
  .chapter {
    page-break-after: always;
  }
}

• Not all browsers interpret page-break-after perfectly. Always test in Chrome, Firefox, and Safari print preview.
• In modern CSS, the Paged Media module introduces break-after, which is more flexible and future-proof:

@media print {
  .section {
    break-after: page;
  }
}

---

🧾 Summary

Feature	Description
What it does	Inserts a page break after an element
Common use case	Controlling layout in print mode
Best used with	@media print queries
Alternatives	break-after (modern), page-break-before, page-break-inside

---

🔚 Final Thoughts

CSS isn’t just about screens. With properties like page-break-after, you gain the power to design printed content with intention — making your reports, eBooks, forms, and documents clean, readable, and ready for the real world.

---