I'm trying to make Chrome work with page-break for printing. I've found multiple topics here, and tried a lot of possible solutions, but non of them worked for me.
The topic's i've tried:
Google Chrome Printing Page Breaks, Page-Break-inside property is not working in chrome, CSS Page-Break Not Working in all Browsers
And more..
I've created a jsfiddle to show what i've got for code:
http://jsfiddle.net/bLezsLkr/1/
(can't post without code: CSS which is used)
@media print {
.pageBreak {
page-break-after: always;
-webkit-region-break-after: always;
height: 2px;
display: block;
float: none;
}
.topinfo {
-webkit-region-break-inside: avoid;
-webkit-region-break-after: always;
page-break-after: always;
page-break-inside: avoid;
}
.blockTitle {
page-break-after: avoid;
-webkit-region-break-after: avoid;
}
.leftPix, img {
-webkit-region-break-inside: avoid;
page-break-inside : avoid;
}
}
Why does Internet Explorer print the page as i want, and why does Chrome print the page with the second row of colored blocks on 2 pages?
Make sure the element with page-break-after: always;
is a block element. Another selector might be changing it to inline-block or something else which would prevent the break from being applied.
Also make sure the element is not within a float
ed element. Thanks RoadBump.
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