395

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.

0

15 Answers 15

622

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;
    }
}
8
  • 19
    But like all good things in CSS, this doesn't always work consistently across the board, so test the living daylights out of it, lest you have angry users wondering why your site prints piles of extra blank pages!
    – Zoe
    Commented Nov 2, 2009 at 22:17
  • 21
    According to MDN, page-break-after "applies to block elements that generate a box," so using an empty <span> element won't work. It's a better idea to apply it to a piece of your content. See developer.mozilla.org/en-US/docs/Web/CSS/page-break-after Commented Jan 17, 2014 at 17:46
  • 2
    @nullability: Good catch. I had mainly used this at my old job in a WebBrowser control in WinForms which used IE, the gold standard of following standards. Commented Jan 17, 2014 at 19:25
  • 2
    This did not work for me in Chrome... I'm trying to do a pagebreak inside after a <tr> inside a <table>, will it work in this case ? Commented Nov 5, 2018 at 15:25
  • 4
    For some reason, when using this trick in Chrome, 1 row of pixels of next page was leaking into previous one (noticeable when using background-color). I fixed it by using .pagebreak { min-height: 1px; page-break-before: always; }
    – pzmarzly
    Commented Jan 1, 2019 at 17:02
75

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

First page (this will be on page n.1)
<div style="break-after:page"></div>
Second page (This will be on page n.2)
2
  • 4
    <div style="break-after:page"></div> is what worked for me. The first option didn't work for my particular situation.
    – JustinP
    Commented Oct 24, 2022 at 16:08
  • This is because the previous value always (of the deprecated page-break-* CSS properties) is now equivalent to the value page (in the now recommended properties break-before and break-after) ; see: developer.mozilla.org/en-US/docs/Web/CSS/… Commented Mar 9, 2023 at 18:56
60

Try this link

<style>
@media print
{
h1 {page-break-before:always}
}
</style>
1
  • 11
    If you want to skip the first header on the first page, try h1:not(:first-child) { page-break-before:always; } Commented Jul 21, 2015 at 9:22
36

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.

Update: Based on recent comments.

Page break aliases

For compatibility reasons, the legacy page-break-after property should be treated by browsers as an alias of break-after. This ensures that sites using page-break-after continue to work as designed. A subset of values should be aliased as follows:

page-break-after    break-after
auto                auto
left                left
right               right
avoid               avoid
always              page

Note: The always value of page-break-* was implemented by browsers as a page break, and not as a column break. Therefore the aliasing is to page, rather than the always value in the Level 4 spec.

3
  • 4
    It should be noted that this property is only supported by Microsoft IE and Edge browsers. caniuse.com/…
    – Benjamin
    Commented Nov 22, 2019 at 1:20
  • The link by @Benjamin states today, that break-after is supported by latest Microsoft IE 10-11, older Edge 12-18 and Firefox (65-113) browsers. It seems unsupported by Chrome (4-114), most Opera except 11.5, current MS Edge 79-111, IE 6-9 and Safari (3.1-16.5). Can somebody confirm or update these info? That looks like pretty bad support IMHO.
    – Cadoiz
    Commented Apr 3, 2023 at 10:58
  • 5
    @Cadoiz It's specifically always that's unsupported. It should be break-after: page instead caniuse.com/mdn-css_properties_break-after_paged_context_page Commented Apr 13, 2023 at 16:22
15

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 }
10

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 ...
0
8

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>
6

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

  <div style="page-break-inside:avoid;page-break-after:always">
  </div>
1
  • page-break-after:always always gives a new black page after the current page. It is empty. page-break-inside:avoid worked fine. Commented Feb 16, 2023 at 10:11
2

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:

2

CSS

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

HTML

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

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.

2

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.

1
  • in the <style> head in the html or it should be inline in the element you want the page-break-after applied. Commented Jun 19, 2021 at 12:52
1
  • 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.

1

In my case, I'm printing fixed-size images on all the pages. I am printing ID cards automatically. The solution for me is to define a fixed-size page that holds the fixed-size ID card image. Setting display: flex is part of my solution.

When you place fixed-size items where each item fits exactly with the size of the page, the page breaks consistently during printing.

-7

@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>
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.