CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



page-break-after

The page-break-after property is a CSS property that allows you to control where a page break occurs after an element. This property is particularly useful when you are working with long documents that need to be printed or displayed on multiple pages.

When you use the page-break-after property, you can specify whether a page break should occur after an element, and if so, what type of page break should be used. There are several different values that you can use with this property, including:

  • auto: This is the default value, and it allows the browser to determine where to insert a page break based on the content of the document.
  • always: This value forces a page break after the element, regardless of where it falls in the document.
  • avoid: This value tells the browser to avoid inserting a page break after the element, if possible.
  • left: This value forces a page break after the element, and ensures that the next page starts on the left-hand side of a printed document.
  • right: This value forces a page break after the element, and ensures that the next page starts on the right-hand side of a printed document.
  • recto: This value forces a page break after the element, and ensures that the next page starts on the recto (odd-numbered) side of a printed document.
  • verso: This value forces a page break after the element, and ensures that the next page starts on the verso (even-numbered) side of a printed document.

Here are some examples of how you can use the page-break-after property in your CSS:

  <div style="page-break-after: always;">
    This content will always start on a new page.
  </div>

  <div style="page-break-after: avoid;">
    This content will not start on a new page if it can be avoided.
  </div>

  <div style="page-break-after: right;">
    This content will always start on a new page, with the next page starting on the right-hand side of a printed document.
  </div>

It's important to note that the page-break-after property only applies to block-level elements. If you want to apply a page break to an inline element, you will need to wrap it in a block-level element first.

Overall, the page-break-after property is a useful tool for controlling the layout of long documents that need to be printed or displayed on multiple pages. By using this property, you can ensure that your content is presented in a clear and organized way, without any awkward page breaks or other layout issues.

References

Activity