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

Question

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?

Matthew Nolting · Answer 1 · 2013-12-13T18:56:12.043

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

FYI: The "always" value of `break-before` appears to no longer be a valid value. — bagsmode, Sep 06 '18 at 13:16

score 11 · Answer 2 · answered Jul 17 '14 at 20:48

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.

Unfloating fixed this for me in Chrome! Thank you – golden_grahams Mar 26 '17 at 12:42 — golden_grahams, Mar 26 '17 at 12:42

score 7 · Answer 3 · edited Feb 02 '16 at 13:14

7

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

edited Feb 02 '16 at 13:14

ROMANIA_engineer

54,432
29
203
199

answered Feb 02 '16 at 13:03

Joe Esteves

81
1
2

score 3 · Answer 4 · edited May 23 '17 at 11:33

3

<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.

edited May 23 '17 at 11:33

Community

1
1

answered Jan 13 '13 at 13:07

score 1 · Answer 5 · edited Oct 31 '17 at 20:30

1

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

edited Oct 31 '17 at 20:30

Xcodian Solangi

2,342
5
24
52

answered Oct 31 '17 at 18:54

Jeremy Caris

117
1
8

Simon Hayter · Answer 6 · 2013-01-13T12:58:11.323

Chrome has problems processing page-break-after, and page-break-inside this is a known bug and Google has said a few times to avoid using this type of styling since not only Chrome but many more browsers run into problems using it.

You should consider styling the tables thought DIV's rather than the tables themselves. Personally in this day and age its normally best to avoid using tables as they are not as flexible as DIV styling.

DIV styling as mentioned is more flexible and easy to work with and looks almost the same on all browsers since browsers tend to render tables differently across browers.

Here is a simple example of how to style the first table you have in DIV and is by far pixel perfect but should give you an idea. Almost the same with some improvement but without the font you use doesn't look as good, doesnt use image as the background which is ++ :P

CSS

#page {margin:0 auto;width:960px;padding:20px;background:#99deea;}
.myblock {background:#c1ebf2;padding:20px;border-radius:10px;}
.innerblock {width:33.3%;float:left;}
.innerblock h3 {font-size:20px;text-align:center;color:#424242;font-weight:bold;text-shadow:0 0 3px #FFFFFF;}
.innerblock h4 {font-size:14px;padding:10px 0 0 0;color:#778A2C;text-shadow:0 0 3px #FFFFFF;}
.innerblock p {font-size:16px;color:#7A8634;font-weight:bold;padding:0 0px 15px 75px;text-shadow: 0 1px 1px #FFFFFF;}

HTML

<div id="page">
<div class="myblock">
<div class="innerblock">
<h3>Spencer Hill</h3>
<h4>Recent Work:</h4>
  <p>Example Work Number 1</p>
  <p>Example Work Number 2</p>
  <p>Example Work Number 3</p>
</div>
<div class="innerblock">
<h3>Becca Ward $500</h3>
<h4>Recent Work:</h4>
  <p>Example Work Number 1</p>
  <p>Example Work Number 2</p>
  <p>Example Work Number 3</p>
</div>
<div class="innerblock">
<h3>Rachel Tourville $150</h3>
<h4>Recent Work:</h4>
 <p>Example Work Number 1</p>
 <p>Example Work Number 2</p>
 <p>Example Work Number 3</p>  
</div>
<div style="clear:both;"></div>
</div>
</div>

I've saved this code online for you to see and test, take a look at http://jsfiddle.net/tsd4V/

Again this is just a better method you can use table styling but don't use page-break if you want good cross browser compatibility.

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

6 Answers6

Linked