Menu
I have a problem with page-break-after in Google Chrome during printing. It seems that it's not working. I tried Firefox and it's ok there. 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 get it done in Chrome?
426
It should not be inside a flex div. If it is, page break does not work unless flex div is closed.
Ex:
<div class="row">
//bla bla
</div>/*close old flex div*/
<div class="col-12 p-0 display-block break-before"></div>
<div class="row">/*new flex div*/
//bla bla
</div>
<style>
.break-before {
display: block;
position: relative;
page-break-before: always !important;
}
</style>
Please note for page-break to work, div should not have any float!
So if your div has say float:left , reset it for print saying: float: none and it will make page break work again.
37
It is a hack, but Chrome doesn't support page-breaks very well. So try to use 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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
