page-break-* doesn't work on Google chrome

css google-chrome printing

36,725

Solution 1

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;
}

Solution 2

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.

Solution 3

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;
    }
}

Solution 4

<div style="display: inline-block; "> has been reported as a way to avoid page-breaking in the middle of something, YMMV. Also, try removing borders, and ensure there are no floats. See also CSS Page-Break Not Working in all Browsers.

Solution 5

here's an easier solution for setting all parent elements to not float on print:

@media print {
  * { 
    float: none !important; 
  }
  .tab {
    display: block;
    break-before: always;
    page-break-before: always;
  }
}

View more solutions

36,725

jilseego

Updated on July 09, 2022

Comments

jilseego almost 2 years
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?
golden_grahams over 7 years

Unfloating fixed this for me in Chrome! Thank you
bagsmode almost 6 years

FYI: The "always" value of break-before appears to no longer be a valid value.