Can I force a page break in HTML printing?

问题

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.

回答1:

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

回答2:

Try this link

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

回答3:

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 }

回答4:

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.

回答5:

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

回答6:

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

回答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>

来源：https://stackoverflow.com/questions/1664049/can-i-force-a-page-break-in-html-printing

标签

html

printing

page-break