Thursday 5 March 2020

CSS add page breaks

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>
!!!!! add white space nbsp for it work properly
<div class="pagebreak">&nbsp;</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;
    }
}

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

No comments:

Post a Comment