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:

	

	
	
		<p>First paragraph</p>

Second Paragraph

Third Paragraph

	

page-break-after

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

page-break-after:always

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.

page-break-before:always

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

Most Commented Posts

• FAQ: How to fix error 403: access forbidden for phpmyadmin in wampserver?
• PHP: Shorten URLs using Google URL shortener API
• Wordpress Internal Server Error 500 in wp-admin
• Automatic session timeout/logout using php and AJAX
• How to allow users to download files in PHP