CSS page-break-before Property

Posted in CSS Tutorial

Updated on Jul 21, 2024

By Mari Selvan

👁️ 10 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The page-break-before property in CSS is used when printing a document. It specifies whether a page break should occur before a particular element.

This property is useful for creating documents with well-defined sections or chapters, ensuring that specific elements start on a new page when printed.

💡 Syntax

The syntax for the page-break-before property is straightforward. It can be applied to any block-level element.

Syntax

Copied

element {
  page-break-before: value;
}

🎛️ Default Value

The default value of the page-break-before property is auto, which means the page break behavior is determined by the browser.

🏠 Property Values

Value	Description
auto	Default. Allows the browser to decide whether a page break is needed.
always	Always inserts a page break before the element.
avoid	Avoids inserting a page break before the element.
left	Inserts one or two page breaks before the element so that the next page is a left-hand page.
right	Inserts one or two page breaks before the element so that the next page is a right-hand page.
inherit	Inherits this property from its parent element.

📄 Example

In this example, we'll ensure that a heading starts on a new page when printed.

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-before Example</title>
  <style>
    h1 {
      page-break-before: always;
    }
  </style>
</head>
<body>
  <h1>Section 1</h1>
  <p>This is the first section of the document.</p>
  <h1>Section 2</h1>
  <p>This is the second section of the document, and it starts on a new page when printed.</p>
</body>
</html>

🖥️ Browser Compatibility

The page-break-before property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is also supported in Internet Explorer. However, as with any CSS property, it is good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The page-break-before property is a valuable tool for controlling the layout of printed documents.

By using this property, you can ensure that certain elements start on a new page, improving the readability and organization of your printed content. Experiment with different values to see how they can enhance the presentation of your printed documents.