Google Chrome Printing Page Breaks

user_197338 0
Viewed 158087

I'm trying to get google chrome to do page breaks.

I've been told via a bunch of websites that page-break-after: always; is valid in chrome but I can not seem to get it to work even with a very simple example. is there any way to force a page break when printing in chrome?

google-chrome printing css
15 Answers

I had an issue similar to this but I found the solution eventually. I had overflow-x: hidden; applied to the <html> tag so no matter what I did below in the DOM, it would never allow page breaks. By reverting to overflow-x: visible; it worked fine.

Hopefully this helps somebody out there.

user_12576450

This did the trick for me (2021 Chrome):

@media print {
  .page-break {
    display: block;               // <== this can be missing sometimes
    break-before: always;
    page-break-before: always;
  }
}
user_114811480

It's now 2021 and this topic is the first result when searching for the exact issue with Chrome. I found this is a very simple solution that works and can be slapped into your without any additional effort to at least affect Chrome page breaking in the middle of a :

<style>
@media print {
    tr, th, td {
        page-break-inside: avoid !important;
    }
}
</style>

Hopefully that helps save someone time.

user_59223460

I was printing 16 labels on A4 page landscape rotation, 4 labels per row, page was breaking in the last row and only 12 label were on one page in chrome only, I was using display:inline-block; on a div, then replaced it with float:right; and it worked!

user_170334320

It was working for me when I used padding like:

<div style="padding-top :200px;page-break-inside:avoid;">
   <div>My content</div>
</div>
user_89034810
Related