page-break-* doesn't work on Google chrome
So, after some frustration, I found a solution. It's a hack, but Chrome doesn't support page breaks properly, so.. You have to set all of the parent elements to explicitly float: none. In this example, I'm printing tabbed content.
<body> <main role="main"> <section class="tabs"> <div class="tabbed-content"> <div class="tab">print page 1</div> <div class="tab">print page 2</div> <div class="tab">print page 3</div> </div> </section> </main></body>Then your CSS looks similar to this.
html, body, .main-content, .tabs, .tabbed-content { float: none; }.tab { display: block; /* unhide all tabs */ break-before: always; page-break-before: always;}
It's July 2014, and as of today doing float: none; for all parent elements is what worked for me:
@media print { table {float: none !important; } div { float: none !important; } .page-break { page-break-inside: avoid; page-break-before: always; } .dont-print { display: none; } }This solution works on Firefox, Chrome and Safari. I have the !important in there because I'm using Bootstrap, and bootstrap does a float: left by default on divs.
3 years later float:none !important for div was the solution for getting the break working in chrome. Not necessary to float:none all parents (body or html)
@media print { div { float: none !important; }}