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.
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;
}
}
Try this link
<style>
@media print
{
h1 {page-break-before:always}
}
</style>
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)
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.
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.
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 }
Try this (its work in Chrome, Firefox and IE):
... content in page 1 ...
<p style="page-break-after: always;"> </p>
<p style="page-break-before: always;"> </p>
... content in page 2 ...
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> Main</b>
</td>
<td>
#Project<b> Project</b>
</td>
<td>
#TypeMainProj<b> Main + Project</b>
</td>
<td>
#Imprest<b> Imprest</b>
</td>
</tr>
</table>
Below code worked for me and there are some more examples Here
<div style="page-break-inside:avoid;page-break-after:always">
</div>
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://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;.
CSS
@media print {
.pagebreak {
page-break-before: always;
}
}
HTML
<div class="pagebreak"></div>
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.
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.
- 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.
@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>
