Can I force a page break in HTML printing?

Html Problem Overview

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.

Html Solutions

Solution 1 - Html

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.

<div class="pagebreak"> </div>

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 <div>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;
    }
}

Solution 2 - Html

Try this link

<style>
@media print
{
h1 {page-break-before:always}
}
</style>

Solution 3 - Html

First page (scroll down to see the second page)
<div style="break-after:page"></div>
Second page
<br>
<br>
<button onclick="window.print();return false;" />Print (to see the result) </button>

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
<div style='break-after:always'></div>
Page 2

This works too:

First page (there is a break after this)
<div style="break-after:page"></div>
Second page (This will be printed in the second page)

Solution 4 - Html

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.

Solution 5 - Html

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., <div class=newpage>...), you would use

h2, .newpage { page-break-before: always }

Solution 6 - Html

Try this (its work in Chrome, Firefox and IE):

... content in page 1 ...
<p style="page-break-after: always;">&nbsp;</p>
<p style="page-break-before: always;">&nbsp;</p>
... content in page 2 ...

Solution 7 - Html

Let's say you have a blog with articles like this:

<div class="article"> ... </div>

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;.

Solution 8 - Html

I needed a page break after every 3rd row while we use print command on browser.

I added

<div style='page-break-before: always;'></div>

after every 3rd row and my parent div have display: flex; so I removed display: flex; and it was working as I want.

Solution 9 - Html

CSS

@media print {
  .pagebreak { 
     page-break-before: always; 
  }
}

HTML

<div class="pagebreak"></div>

Solution 10 - Html

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.

Solution 11 - Html

First page (scroll down to see the second page)
<div style="break-after:page"></div>
Second page
<br>
<br>
<button onclick="window.print();return false;" />Print (to see the result) </button>

Solution 12 - Html

> - 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
<p style="page-break-after: always"></p>
HTML_BLOCK_2
<p style="page-break-after: always"></p>
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.

Solution 13 - Html

Below code worked for me and there are some more examples Here

  <div style="page-break-inside:avoid;page-break-after:always">
  </div>

Solution 14 - Html

For example: below code is present at end of the page and you want to force HTML to print on another page so you can code like this

       <table>
            <tbody>
               <tr>
                  <td width="180" valign="top">
                            <p>
                                <strong> </strong>
                            </p>
                            <p>
                                <strong> </strong>
                            </p>
                            <p>
                                <strong> </strong>
                            </p>
                            <p>
                                <strong> </strong>
                            </p>
                            <p align="center">
                                <strong>Approved by Director</strong>
                            </p>
                        </td>
                    </tr>
                </tbody>
            </table>

the main code gose here: desired answer

<div style="page-break-inside:avoid;page-break-after:always"></div>

Now write the remaining code for the second/another page like this

                <table border="1">
                            <tr class="center">
                                <td>
                                    #Main<b>&nbsp;Main</b>
                                </td>
                                <td>
                                    #Project<b>&nbsp;Project</b>
                                </td>
                                <td>
                                    #TypeMainProj<b>&nbsp;Main + Project</b>
                                </td>
                                <td>
                                    #Imprest<b>&nbsp;Imprest</b>
                                </td>
                            </tr>
                        </table>

Solution 15 - Html

@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 <p> tag with any block element.

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

Content Type	Original Author	Original Content on Stackoverflow
Question	Daniel Magliola	View Question on Stackoverflow
Solution 1 - Html	Chris Doggett	View Answer on Stackoverflow
Solution 2 - Html	jfarrell	View Answer on Stackoverflow
Solution 3 - Html	PythonProgrammi	View Answer on Stackoverflow
Solution 4 - Html	Shahbaz A.	View Answer on Stackoverflow
Solution 5 - Html	Jukka K. Korpela	View Answer on Stackoverflow
Solution 6 - Html	Ousama	View Answer on Stackoverflow
Solution 7 - Html	Basj	View Answer on Stackoverflow
Solution 8 - Html	Dinesh Sharma	View Answer on Stackoverflow
Solution 9 - Html	user9542745	View Answer on Stackoverflow
Solution 10 - Html	joe	View Answer on Stackoverflow
Solution 11 - Html	Krutika Patel	View Answer on Stackoverflow
Solution 12 - Html	Chinmay	View Answer on Stackoverflow
Solution 13 - Html	RoshanS	View Answer on Stackoverflow
Solution 14 - Html	ronak munjapara	View Answer on Stackoverflow
Solution 15 - Html	Oniya Daniel	View Answer on Stackoverflow