Menu
I just like the divs under .wp_left_col div be placed in separate pages. This is my css code.
.wpi_left_col > div {
page-break-after: always !important;
page-break-inside: avoid !important;
}
It works on Firefox. How come it doesn't work on Google Chrome?
585
It's done via CSS (inline or in a stylesheet) by adding 'page-break-after: always' to a paragraph at the bottom of your page (above where you intend to break). Optionally, you may need to also add 'page-break-before:always' to the paragraph or heading (or other block level element) at the top of the next page.
To suggest a page break, add <P style="page-break-before: always"> before the beginning of a new printed page. For example, if you place the following tags on a HTML page and print it using a compatible browser, you will end-up with three pages with the sample text.
The page-break-after property adds a page-break after a specified element. Tip: The properties: page-break-before, page-break-after and page-break-inside help to define how a document should behave when printed. Note: You cannot use this property on an empty <div> or on absolutely positioned elements.
Similarly, you can avoid page breaks inside tables, lists, and any other block-level element. A code block split into two spanning across two pages because of a page break inside it. This can be avoided using the page-break-inside property.
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.
36
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
