Google Chrome Printing Page Breaks

css printing google-chrome

154,989

Solution 1

I've used the following approach successfully in all major browsers including Chrome:

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <h1>This is Page 1</h1>
    </div>
    <div class="page">
      <h1>This is Page 2</h1>
    </div>
    <div class="page">
      <h1>This is Page 3</h1>
    </div>
  </body>
</html>

This is a simplified example. In the real code, each page div contains many more elements.

Solution 2

Actually one detail is missing from the answer that is selected as accepted (from Phil Ross)....

it DOES work in Chrome, and the solution is really silly!!

Both the parent and the element onto which you want to control page-breaking must be declared as:

position: relative

check out this fiddle: http://jsfiddle.net/petersphilo/QCvA5/5/show/

This is true for:

page-break-before
page-break-after
page-break-inside

However, controlling page-break-inside in Safari does not work (in 5.1.7, at least)

i hope this helps!!!

PS: The question below brought up that fact that recent versions of Chrome no longer respect this, even with the position: relative; trick. However, they do seem to respect:

-webkit-region-break-inside: avoid;

see this fiddle: http://jsfiddle.net/petersphilo/QCvA5/23/show

so i guess we have to add that now...

Hope this helps!

Solution 3

I just wanted to note here that Chrome also ignores page-break-* css settings in divs that have been floated.

I suspect there is a sound justification for this somewhere in the css spec, but I figured noting it might help someone someday ;-)

Just another note: IE7 can't acknowledge page break settings without an explicit height on the previous block element:

http://social.msdn.microsoft.com/forums/en-US/iewebdevelopment/thread/fe523ec6-2f01-41df-a31d-9ba93f21787b/

Solution 4

I had an issue similar to this but I found the solution eventually. I had overflow-x: hidden; applied to the <html> tag so no matter what I did below in the DOM, it would never allow page breaks. By reverting to overflow-x: visible; it worked fine.

Hopefully this helps somebody out there.

Solution 5

I'm having this problem myself - my page breaks work in every browser but Chrome - and was able to isolate it down to the page-break-after element being inside a table cell. (Old, inherited templates in the CMS.)

Apparently Chrome doesn't honor the page-break-before or page-break-after properties inside table cells, so this modified version of Phil's example puts the second and third headline on the same page:

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <h1>This is Page 1</h1>
    </div>

    <table>
    <tr>
        <td>
            <div class="page">
              <h1>This is Page 2</h1>
            </div>
            <div class="page">
              <h1>This is, sadly, still Page 2</h1>
            </div>
        </td>
    </tr>
    </table>
  </body>
</html>

Chrome's implementation is (dubiously) allowed given the CSS specification - you can see more here: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=en

View more solutions

154,989

Mike Valstar

I am a php/javascript programmer actively working on intranet projects for several companies. I am currently working on Pomby, an open source knowledgebase app.

Updated on July 08, 2022

Comments

Mike Valstar almost 2 years

I'm trying to get google chrome to do page breaks.

I've been told via a bunch of websites that page-break-after: always; is valid in chrome but I can not seem to get it to work even with a very simple example. is there any way to force a page break when printing in chrome?
- Alex KeySmith about 10 years
  
  It appears that this has relatively recently (February 2014) been discussed (on an old 2005 bug ticket) on the webkit bug tracker bugs.webkit.org/show_bug.cgi?id=5097
Mike Valstar over 14 years

Ah i see my problem i think. I was attempting to use it with a <br/> tag
Markus Schober about 13 years

@Mike Thanks for answering the problem for me. Not sure why a br doesn't work and a div does, but nonetheless an easy change.
caffeine.storm over 12 years

This was my problem - forced into using table cells for layout by SharePoint 2007, so Chrome was obeying any print style sheet layout declarations :(
Joel Peltonen over 11 years

It depends on the version of WebKit used if it works or not in Chrome. You yourself said it does not work in Safari 5.1.7, so I don't think it's silly at all. The version of WK in what they tested might be different from what you tested.
Joe Dyndale about 11 years

Likely because floating an element takes it out of the document flow in the same way absolutely positioning it does. Elements with position:absolute won't work with page-break-*.
Joe Dyndale about 11 years

That page doesn't work in Chrome 26.0.1410.65, I get 3 pages and the last one only has one word on it). I also tried making sure both the element I want to apply the rule to and its parent have position:relative on my own page, but it still won't add the page break when printing. So is this a feature that comes and goes in Chrome?
Peter about 11 years

You're right.... it doesn't seem to work in recent versions of chrome; however, you can replace it with: -webkit-region-break-inside: avoid; (see this one: jsfiddle.net/QCvA5/22/show)
Zach Saucier over 10 years

@Peter Any updates here? I posted an SO question with bounty trying to fix a situation I have using page-break-inside. Any help?
V.J. about 10 years

this works when you try to use with parent page, but does not work when you print from iframe (in chrome, of course).
doub1ejack over 9 years

Also read @peter's answer below; he also had a good point about position: relative.
Gavin Simpson over 9 years

This worked for me with one oddity - it only works if I put the style inline, and not in the seperate css file. I'm using it on an h7 element. Chrome version is 38.0.2125.111 m. <h7 class="page-breaker" style="display: block;position: relative;page-break-before:always">Grade <?php echo $grade;?></h7>
Gavin Simpson over 9 years

My Bad. Works in css file as well. Had media set to screen when calling the css file.
Jimba Tamang almost 9 years

And "float" as well. There shouldn't be any "float" properties in parent elements.
joeforker over 8 years

Any hints on getting this to not break the margin/padding inside the tds?
Erik about 8 years

@joeforker you should use the <tr> with "padding: 0; margin: 0;" and give the margin properties to the elements contained within.
Mikko Rantalainen about 8 years

According to spec break-after and break-before apply only to block-level elements, table row groups, table rows (but see prose): drafts.csswg.org/css-break-3/#break-between – that means no floats or any fancy positioning tricks.
bstory almost 8 years

This solved the problem when nothing else did. Thanks!
Stalinko over 7 years

Also: there shouldn't be any floating or absolute positioned elements among all parents of the element with page break style. I had bootstrap "col-xs-12" parent, when I explicitly set "float: none" to it, the page break began to work!
Michael Schmid about 7 years

Same with display: flex
Naveen DA almost 7 years

This is I want exactly
Garrett about 5 years

Note that any parent element with certain overflow properties can cause this issues. I just added the rule * { overflow-x: visible }.
Tommyka almost 5 years

It do not work if the container uses display:flex
Char over 4 years

This only worked because of the padding and not because of the page-break
AlanObject over 4 years

This worked for me ONLY if the div.page CSS was in an inline style tag with media set to "print". In other words it does not work inside a @media print element in my global style sheet.
Taki over 3 years

That's is a correct option to remember! The content may be just hidden.
Pianoman almost 3 years

@Tommyka thanks! This solved my problem. So, in my @media print {} I set the section to display:block instead of flex. Took me quite some time to find your hint. !
strarsis over 2 years

That display: flex container bug in Chrome should be similar to this Mozilla (Firefox) one: bugzilla.mozilla.org/show_bug.cgi?id=1622935
Nebular Noise about 2 years

Thank you ! What I was missing was the display: block;