Page break in HTML pages

By Akbar • June 21st, 2008
Page break in HTML pages
 
When generating reports directly in the HTML, it’s often required to do a forced page break so that a new sections always prints on a new page. Fortunately, this is very simple with the help of CSS. For this you just need to add the “page-break-before:always” or “page-break-after:always” styles to the tags on which you want to have the page break.
 
As clear from the name, if you add the  “page-break-before:always”, it will add a page break before the current tag. Similarly, “page-break-after:always” will create a page break after the current tag end.
 
Here is a sample code to see this in action
<div style=”page-break-before:always”>This will print on first page</div>
 
<div style=”page-break-before:always; page-break-after:always”>This will print on second page</div>
 
<div>This will print on third page</div>
Please notice that how we have added the page break before and after attributes on the second page such that we no longer need this on the third DIV tag.
 
Note: Please note that these attributes doesn’t work in FireFox (and most other browsers) when used within tables (cells or rows). When having problem with the page break, make sure the section you want to have break on is not under any table.

Tags: , ,

This entry was posted on Saturday, June 21st, 2008 at 7:02 pm and is filed under HTML & CSS. You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.