Can I force a page break in HTML printing

Question

I m making a HTML report that is going to be printable  and it has  sections  that should start in a new page   Is there any way to put something in the HTML CSS that will signal to the browser that it needs to force a page break  start a new page  at that point   I don t need this to work in every browser out there  I think I can tell people to use a specific set of browsers in order to print this

User · Answer

CSS   media print      pagebreak         page-break-before  always           HTML   lt div class  pagebreak  gt  lt  div gt

User · Answer

I was struggling this for some time  it never worked  In the end  the solution was to put a style element in the head  The page-break-after can t be in a linked CSS file  it must be in the HTML itself

User · Answer

We can add a page break tag with style  page-break-after  always  at the point where we want to introduce the pagebreak in the   html page      page-break-before  also works      Example   HTML BLOCK 1  lt p style  page-break-after  always  gt  lt  p gt  HTML BLOCK 2  lt p style  page-break-after  always  gt  lt  p gt  HTML BLOCK 3   While printing the html file with the above code  the print preview will show three pages  one for each html block  HTML BLOCK n    where as in the browser all the three blocks appear sequentially one after the other

User · Answer

Chris Doggett makes perfect sense  Although  I found one funny trick on lvsys com  and it actually works on firefox and chrome  Just put this comment anywhere you want the page-break to be inserted  You can also replace the  lt p gt  tag with any block element    lt p gt  lt  -- pagebreak -- gt  lt  p gt

User · Answer

Try this  its work in Chrome  Firefox and IE       content in page 1      lt p style  quot page-break-after  always  quot  gt  amp nbsp  lt  p gt   lt p style  quot page-break-before  always  quot  gt  amp nbsp  lt  p gt      content in page 2

User · Answer

You can use the CSS property page-break-before  or page-break-after   Just set page-break-before  always on those block-level elements  e g   heading  div  p  or table elements  that should start on a new line   For example  to cause a line break before any 2nd level heading and before any element in class newpage  e g    lt div class newpage gt       you would use  h2   newpage   page-break-before  always

User · Answer

x000D   x000D  First page  scroll down to see the second page  x000D   lt div style  break-after page  gt  lt  div gt  x000D  Second page x000D   lt br gt  x000D   lt br gt  x000D   lt button onclick  window print   return false     gt Print  to see the result   lt  button gt  x000D   x000D   x000D    Just add this where you need the page to go to the next one  the text  page 1  will be on page 1 and the text  page 2  will be on the second page    Page 1  lt div style  page-break-after always  gt  lt  div gt  Page 2   This works too   First page  there is a break after this   lt div style  break-after page  gt  lt  div gt  Second page  This will be printed in the second page

User · Answer

Let s say you have a blog with articles like this    lt div class  article  gt       lt  div gt    Just adding this to the CSS worked for me    media print      article   page-break-after  always         tested and working on Chrome 69 and Firefox 62    Reference     https   www w3schools com cssref pr print pageba asp https   developer mozilla org en-US docs Web CSS page-break-after   important note  here it s said This property has been replaced by the break-after property  but it didn t work for me with break-after  Also the MDN doc about break-after doesn t seem to be specific for page-breaks  so I prefer keeping the  working  page-break-after  always

User · Answer

Try this link   lt style gt   media print   h1  page-break-before always     lt  style gt

User · Answer

I needed a page break after every 3rd row while we use print command on browser  I added  lt div style  page-break-before  always   gt  lt  div gt   after every 3rd row and my parent div have display  flex  so I removed display  flex  and it was working as I want

User · Answer

Just wanted to put an update  page-break-after is a legacy property now   Official page states     This property has been replaced by the break-after property

User · Answer

Add a CSS class called  pagebreak   or  pb    like so    media print        pagebreak   page-break-before  always       page-break-after works  as well        Then add an empty DIV tag  or any block element that generates a box  where you want the page break    lt div class  pagebreak  gt   lt  div gt    It won t show up on the page  but will break up the page when printing   P S  Perhaps this only applies when using -after  and also what else you might be doing with other  lt div gt s on the page   but I found that I had to augment the CSS class as follows    media print        pagebreak           clear  both          page-break-after  always

[html] Can I force a page break in HTML printing?

Examples related to html

Examples related to printing

Examples related to page-break