HTML&CSS · December 20, 2023

Css Basic: page-break-after

CSS Basics: page-break-after

CSS (Cascading Style Sheets) is a powerful tool that allows web developers to control the layout and presentation of web pages. One useful CSS property is page-break-after, which allows you to control how content is divided and displayed when printing or generating PDFs.

Understanding page breaks

When printing a web page or generating a PDF, it's important to ensure that the content is properly divided into pages. Without proper page breaks, the printed output may have awkward content cutoffs or may not fit well on the page.

The page-break-after property is used to specify whether a page break should occur after an element. It can be applied to block-level elements such as <div>, <p>, or <section>.

Usage and values

The page-break-after property accepts several values:

  • auto: The browser determines if a page break should occur after the element.
  • always: A page break is always inserted after the element.
  • avoid: The browser tries to avoid a page break after the element.
  • left: A page break is inserted so that the next page starts on the left side.
  • right: A page break is inserted so that the next page starts on the right side.
  • recto: A page break is inserted so that the next page starts on the recto side (the right side in Western languages).
  • verso: A page break is inserted so that the next page starts on the verso side (the left side in Western languages).

For example, if you want to ensure that a new page starts after a specific <div> element, you can use the following CSS:

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

<div class="page-break"></div>

This will insert a page break after the <div> element, ensuring that the content following it starts on a new page.

Browser support

The page-break-after property is supported by most modern browsers, including Chrome, Firefox, Safari, and Edge. However, it's important to note that its behavior may vary slightly between browsers.

Conclusion

The page-break-after property is a useful tool for controlling how content is divided and displayed when printing or generating PDFs. By using this property, web developers can ensure that their content is properly paginated and avoids awkward cutoffs. Understanding and utilizing CSS properties like page-break-after can greatly enhance the printing experience for users.

For more information on VPS hosting solutions, visit Server.HK.

You may also like...