What You’ll Learn

The page-break-after property controls page breaks after an element when a document is printed. It is especially useful for reports, invoices, books, and any printable layout where each chapter or section should start on a new page.

Introduction

The page-break-after property in CSS is used to control the behavior of page breaks after a specified element when printing a document.

This property is particularly useful for creating printable documents where control over page breaks is necessary, such as reports, invoices, or other formatted documents.

Definition and Usage

The page-break-after property can be applied to block-level elements when you need the content that follows to start on a new printed page. For example, you can force each chapter heading to end its page so the next chapter begins cleanly.

Like other print properties, page-break-after usually has little or no visible effect on a normal scrolling screen layout. Test your rules in the browser’s print preview to see the real result.

📝 Syntax

The syntax for the page-break-after property is straightforward. It can be applied to block-level elements, and it takes one of several keyword values.

element {
  page-break-after: value;
}

Basic Example

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

Syntax Rules

• Apply page-break-after to block-level elements such as headings, sections, and divs.
• The value is a keyword: auto, always, avoid, left, or right.
• The property is not inherited — set it on the element where the break should occur.
• Use inside @media print when you only want breaks when printing.
• For new projects, consider the modern break-after property as a replacement.

🎯 Default Value

The default value of the page-break-after property is auto. This means the browser will automatically insert a page break after the element if necessary.

💎 Property Values

The page-break-after property accepts keyword values that control page-break behavior after an element when printing.

When Does page-break-after Matter?

page-break-after only affects paginated output. These are the most common use cases:

• Reports and invoices — Start each major section on a new printed page with page-break-after: always.
• Books and manuals — Break after chapter headings so each chapter begins cleanly.
• Readable grouping — Use avoid to keep headings with the paragraphs that follow them.
• Duplex printing — Use left and right when odd and even pages need specific facing-page layout.

On a normal scrolling web page, you may not see any effect — that is normal. Test in print preview to verify behavior.

Examples Gallery

Start with the reference chapter example, try forced breaks, keep headings with their content, and explore left/right facing-page rules.

<style>
  @media print {
    h1 {
      page-break-after: always;
    }
  }
</style>

<h1>Chapter 1</h1>
<p>This is the first chapter.</p>

<h1>Chapter 2</h1>
<p>This is the second chapter.</p>

<style>
  .section-end {
    page-break-after: always;
  }
</style>

<h1>Report Section A</h1>
<p>Content for the first section.</p>
<div class="section-end"></div>
<h1>Report Section B</h1>
<p>This section starts on a new page when printed.</p>

<style>
  @media print {
    h2 {
      page-break-after: avoid;
    }
  }
</style>

<h2>Chapter Title</h2>
<p>The paragraph stays with the heading instead of breaking away.</p>

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

  .appendix {
    page-break-after: left;
  }
}

page-break-after vs break-after

page-break-after is the legacy print property. The modern replacement is break-after, which also supports column and region breaks.

In legacy stylesheets, page-break-after: always is equivalent to break-after: page. When writing new CSS, prefer break-after for better long-term support.

/* Legacy */
h1 {
  page-break-after: always;
}

/* Modern equivalent */
h1 {
  break-after: page;
}

💡 Best Practices