FAQ: Specifying css page breaks after or before elements for printing

While printing web pages you can specify the browser to insert page breaks before or after certain elements. This can be handy for printing documents like tickets, vouchers where information must be grouped and displayed on separate pages.

There are 2 CSS properties which can be used to insert page breaks in HTML while printing. These are page-break-after and page-break-before.

For example, consider a page with following html:

page-break-after

If you want page break after a particular element add the following css to it.

This will force the following element to print in a new page. If it is applied to second paragraph in above html, third paragraph will be printed on a new page.

page-break-before

If you want page break before a particular element add the following css to it.

This will insert a page break just before current element, hence printing it on a new page. If it is applied to second paragraph in above html, second paragraph itself will be printed on a new page.

Full reference for these properties can be seen at W3.org