How to add page breaks to html

February, 8 2012

We often get the question about creating HTML that sends proper page breaks to the printer.

It's actually very easy to handle. There are two ways to do it:

1) via CSS - for the advanced HTML users:

<p style="page-break-after:always;"></p>

2) with a simple comment:

<p><!-- pagebreak --></p> 

For example, if you try printing this page (try Chrome print preview) the line below should be on a second page:

Page break below this line.

This line should be on the top of the second page.

That's it.

Comments

10/22/2012 01:57 / anonymous said:
thanks
11/30/2013 08:00 / SeFun said:
Thank you!
04/20/2014 11:38 / bam said:
Neither method works on Chrome
(at least, not on print preview).
04/27/2014 03:09 / Fred said:
Hi,

I put the following code in between two Panels: (Tried all three separately... on 2 different printers) and still no page break... what am I missing?

E.g. My simple request:
06/25/2014 22:12 / LVSYS said:
Make sure to type the CSS and the HTML without typos. It works. Try it on Chrome print preview
09/15/2014 06:17 / Jor said:
I noticed that it does not work within a table.
09/17/2014 00:42 / Joseph Jojo said:
Wow Its working.. Thank you
01/07/2015 08:00 / Eric Newton said:
So the irony of this article is that when I preview, it does show in that spot but it seems to "just fit" due to all the other (IMO) "non-print-applicable" stuff.

These items probably shouldn't be rendered in a print view,
- Post a Comment form,
- the Navigation (since you cant touch and have your computer load the right page),
- the live chat rendered "nobody is available right now" in print
and several other items...

Those all combined seemed to (ironically) precisely place the pagebreak right at a natural place due to content already...

Anyways, thanks for the HTML comment tip though! I'll try it out in several browsers. Nice to have a WYSIWYG-editor-way for the content editors to add a hard page break.
02/16/2015 06:04 / Aarti Devi said:

use this .. working for me
03/31/2015 14:29 / PB said:
Does method #2 work on all browser? I am trying to figure out which method is more universally compatible... I could have both but that may insert two page-breaks.
04/09/2015 16:22 / AltSol said:
Worked like a champ!! Saved my bacon.
04/09/2015 17:10 / LVSYS said:
@PB:

You should try the one that works best for your case. Printing web pages rarely work the way you think it would.

We use both tricks for order report pages, sales report pages and other types of HTML reports generated by the platform. Saves lots of paper when it's carefully done.

@Eric Newton:

We didn't bother to add printing stylesheets to this website and yes, we're aware that the line break might appear near the natural page break of this pag e: ) as luck would have it.

Post A Comment

We'd love to hear your thougts. All comments are subject to administrator approval before appearing on this website. All comments of spammy nature are automatically rejected.

Name:
Email Address: (will not be displayed)
Comment
Captcha

Signup For Newsletter

Email Address: