CSS Page Break

CSS provides properties to control page breaks in printed documents. These are especially useful when designing content for printing, such as reports, invoices, or books. Here’s a beginner-friendly guide to CSS page-break properties:

What is a Page Break?

A page break is where content is split into separate pages during printing. CSS allows you to control where these breaks occur to ensure the printed document looks professional and organized.

CSS Properties for Page Breaks

1. page-break-before
   • Purpose: Forces or avoids a page break before an element.
   • Values:
     • auto (default): No specific page break rule.
     • always: Always insert a page break before the element.
     • avoid: Avoid a page break before the element.
     • left: Insert a page break before the element to start on a left page.
     • right: Insert a page break before the element to start on a right page.
   • Example:

     h1 {
       page-break-before: always;
     }
     

     Try It Now

2. page-break-after
   • Purpose: Forces or avoids a page break after an element.
   • Values: Same as page-break-before.
   • Example:

     p {
       page-break-after: avoid;
     }
     

     Try It Now

3. page-break-inside
   • Purpose: Controls whether a page break is allowed inside an element.
   • Values:
     • auto (default): Page breaks are allowed inside the element.
     • avoid: Avoid page breaks inside the element.
   • Example:

     table {
       page-break-inside: avoid;
     }
     

     Try It Now

Common Use Cases

1. Avoid Breaking Tables: Ensure tables don’t split across pages:

   table {
     page-break-inside: avoid;
   }
   

   Try It Now

2. Force New Page for Headings: Start each new chapter or section on a new page:

   h1 {
     page-break-before: always;
   }
   

   Try It Now

3. Prevent Breaking Paragraphs: Keep paragraphs intact:

   p {
     page-break-inside: avoid;
   }
   

   Try It Now

Modern Alternative: break-* Properties

The page-break-* properties are now considered legacy. Modern CSS introduces the break-* properties, which work similarly but are more flexible:

• break-before
• break-after
• break-inside

These properties support not only page breaks but also column and region breaks in multi-column layouts.

Example with Modern Syntax

h1 {
  break-before: page;
}

p {
  break-inside: avoid;
}

Important Notes

1. Media Query for Print: Use the @media print rule to apply these styles only during printing:

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

   Try It Now

2. Browser Support:
   • Most modern browsers support page-break-* and break-* properties.
   • Test your styles to ensure compatibility.