CSS page-break-after Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 42 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 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.

💡 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.

Syntax

Copied

element {
  page-break-after: value;
}

🎛️ Default Value

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

🏠 Property Values

Value	Description
auto	Allows the browser to automatically insert a page break if needed.
always	Always insert a page break after the element.
avoid	Avoid inserting a page break after the element.
left	Insert one or two page breaks after the element so that the next page is formatted as a left page.
right	Insert one or two page breaks after the element so that the next page is formatted as a right page.
initial	Sets the property to its default value (auto).
inherit	Inherits the property from its parent element.

📄 Example

In this example, we'll ensure that a page break always occurs after a heading when printing the document.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS page-break-after Example</title>
  <style>
    @media print {
      h1 {
        page-break-after: always;
      }
    }
  </style>
</head>
<body>
  <h1>Chapter 1</h1>
  <p>This is the first chapter.</p>
  
  <h1>Chapter 2</h1>
  <p>This is the second chapter.</p>
</body>
</html>

🖥️ Browser Compatibility

The page-break-after property is widely supported in modern browsers. It works reliably in browsers such as Chrome, Firefox, Safari, Edge, and Opera. It's important to note that this property is primarily used for print styles, so testing should be done by previewing the print version of your document in these browsers.

🎉 Conclusion

The page-break-after property is an essential tool for creating well-formatted, printable documents.

By controlling where page breaks occur after specific elements, you can ensure that your printed content appears organized and professional. Experiment with different values to achieve the desired layout for your print media.