Controlling Pagination with CSS

To control pagination, use the page-break-before, page-break-after, and page-break-inside properties.

Both the page-break-before and page-break-after accept the auto, always, avoid, left, and right keywords.

The keyword auto is the default; it lets the browser generate page breaks as needed. The keyword always forces a page break before or after the element, while avoid suppresses a page break immediately before or after the element. The left and right keywords force one or two page breaks, so that the element is rendered on a left-hand or right-hand page.

Using pagination properties is quite straightforward. Suppose your document has level-1 headers start new chapters with level-2 headers to denote sections. You'd like each chapter to start on a new, right-hand page, but you don't want section headers to be split across a page break from the subsequent content.

Example

You can achieve this using the following rule

<style>
   <!--
      h1 {
         page-break-before : right
      }
      h2 {
         page-break-after : avoid
      }
   -->
</style>