Geek Answers Handbook

Page-break-after does not work in Chrome

I have a problem with page-break-after in Google Chrome while printing. It seems that it is not working. I tried Firefox and everything is fine. My code is:

 <div style="position: relative; display: block;"> <div style="display: block; page-break-after: always; position: relative;">Page 1</div> <div style="display: block; position: relative; page-break-before:always;">Page 2</div> </div>

Is there any trick to do this in Chrome?

+11
source share
3 answers

This is a hack, but Chrome does not support page breaks very well. So try using this instead:

 <body> <main role="main"> <section class="tabs"> <div class="tabbed-content"> <div class="break-after">Page 1</div> <div class="break-before">Page 2</div> </div> </section> </main> </body>

And add this to your css:

 html, body, .main, .tabs, .tabbed-content { float: none; } .break-after { display: block; page-break-after: always; position: relative; } .break-before { display: block; page-break-before: always; position: relative; }
+7
source

Please note that to break the page you need to work, the div should not be floating!

So if your div said: float: left, discard it for printing by saying: float: none, and this will make the page break work again.

+2
source

I was not able to get previous answers to work in Chrome in October 2019. Now, it seems you should use break-before: page , not break-before: always .

This also works in FF, like the previous answers.

 <div> <div class="break-before"> Page 1 </div> <div class="break-before"> Page 2 </div> </div> 
 .break-before { break-before: page; }
0
source

More articles:


All Articles