Google Chrome Printing Page Breaks

Question

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?

It appears that this has relatively recently (February 2014) been discussed (on an old 2005 bug ticket) on the webkit bug tracker https://bugs.webkit.org/show_bug.cgi?id=5097 — Alex KeySmith, Apr 21 '14 at 10:20

score 150 · Accepted Answer · answered Oct 29 '09 at 22:55

150

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.

answered Oct 29 '09 at 22:55

Phil Ross

25,590
9
67
77

4

Ah i see my problem i think. I was attempting to use it with a
tag – Mike Valstar Oct 29 '09 at 23:19
@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. – Jeff Davis Mar 30 '11 at 21:37
this works when you try to use with parent page, but does not work when you print from iframe (in chrome, of course). – V.J. Apr 24 '14 at 11:48
Also read @peter's answer below; he also had a good point about `position: relative`. – doub1ejack Oct 06 '14 at 20:20
9

According to spec `break-after` and `break-before` apply only to `block-level elements, table row groups, table rows (but see prose)`: https://drafts.csswg.org/css-break-3/#break-between – that means no floats or any fancy positioning tricks. – Mikko Rantalainen Jun 02 '16 at 11:27
This is I want exactly – Naveen DA Sep 20 '17 at 12:13
5

It do not work if the container uses ```display:flex``` – Tommyka Sep 18 '19 at 12:39
1

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. – AlanObject Jan 31 '20 at 23:11
@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. ! – Pianoman Aug 09 '21 at 20:29
That `display: flex` container bug in Chrome should be similar to this Mozilla (Firefox) one: https://bugzilla.mozilla.org/show_bug.cgi?id=1622935 – strarsis Mar 10 '22 at 18:29

Peter · Answer 2 · 2013-05-13T13:33:56.980

38

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!

edited May 13 '13 at 13:33

answered Sep 12 '12 at 10:58

Peter

1,236
10
10

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. – Joel Peltonen Sep 28 '12 at 07:19
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? – Joe Dyndale May 07 '13 at 14:56
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: http://jsfiddle.net/QCvA5/22/show/) – Peter May 13 '13 at 13:29
@Peter Any updates here? [I posted an SO question](http://stackoverflow.com/questions/20535801/page-break-inside-being-ignored) with bounty trying to fix a situation I have using `page-break-inside`. Any help? – Zach Saucier Dec 15 '13 at 23:15
1

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. `Grade ` – Gavin Simpson Feb 08 '15 at 07:05
My Bad. Works in css file as well. Had media set to screen when calling the css file. – Gavin Simpson Feb 08 '15 at 09:35

fordareh · Answer 3 · 2011-07-20T01:47:37.310

16

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/

edited Jul 20 '11 at 01:47

answered Jul 14 '11 at 22:23

fordareh

2,923
2
26
39

2

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 May 07 '13 at 14:42
1

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! – Stalinko Jan 05 '17 at 09:20

score 13 · Answer 4 · answered Mar 12 '12 at 16:17

13

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.

answered Mar 12 '12 at 16:17

davidbehan

239
2
4

Note that any parent element with certain overflow properties can cause this issues. I just added the rule `* { overflow-x: visible }`. – Garrett Jun 04 '19 at 03:24

score 10 · Answer 5 · answered Jun 03 '14 at 13:48

10

Beware of CSS : display:inline-block when printing.

None of the CCS property to go to next page would work for me in Chrome and Firefox if my table was inside a div with the style display:inline-block

For example, the following doesn't work :

<div style='display:inline-block'>
  <table style='page-break-before:always'>
    ...
  </table>
  <table style='page-break-before:always'>
    ...
  </table>
</div>

But the following work :

<div>
  <table style='page-break-before:always'>
    ...
  </table>
  <table style='page-break-before:always'>
    ...
  </table>
</div>

answered Jun 03 '14 at 13:48

Gudradain

4,653
2
31
40

1

And "float" as well. There shouldn't be any "float" properties in parent elements. – Jimba Tamang Aug 07 '15 at 01:32
4

Same with `display: flex` – Michael Schmid Jun 04 '17 at 19:45

score 10 · Answer 6 · answered May 14 '10 at 09:01

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

This was my problem - forced into using table cells for layout by SharePoint 2007, so Chrome was obeying any print style sheet layout declarations :( — Dexter, Jan 20 '12 at 17:24

score 4 · Answer 7 · edited May 13 '18 at 13:35

4

I faced this issue on chrome before and the cause for it is that there was a div has min-height set to a value. The solution was to reset min-height while printing as follows:

@media print {
    .wizard-content{
        min-height: 0;
    }
}

edited May 13 '18 at 13:35

pppery

3,731
22
33
46

answered Sep 06 '15 at 15:43

Hamdy Ahmed

39
2

score 4 · Answer 8 · answered Jun 06 '16 at 12:51

4

2016 update:

Well, I got this problem, when I had

overflow:hidden

on my div.

After I made

@media print {
   div {
      overflow:initial !important
   }
}

everything became just fine and perfect

answered Jun 06 '16 at 12:51

x0 z1

1,704
1
9
12

1

This solved the problem when nothing else did. Thanks! – bstory Aug 03 '16 at 12:42
That's is a correct option to remember! The content may be just hidden. – Taki Mar 04 '21 at 20:55

Nour SIDAOUI · Answer 9 · 2022-05-04T13:08:07.233

3

This did the trick for me (2021 Chrome):

@media print {
  .page-break {
    display: block;               // <== this can be missing sometimes
    break-before: always;
    page-break-before: always;
  }
}

edited May 04 '22 at 13:08

answered May 18 '21 at 15:57

Nour SIDAOUI

164
5

1

Thank you ! What I was missing was the `display: block;` – Nebular Noise May 04 '22 at 13:05

score 1 · Answer 10 · answered Aug 29 '16 at 07:28

If you are using Chrome with Bootstrap Css the classes that control the grid layout eg col-xs-12 etc use "float: left" which, as others have pointed out, wrecks the page breaks. Remove these from your page for printing. It worked for me. (On Chrome version = 49.0.2623.87)

score 1 · Answer 11 · answered May 12 '21 at 19:29

It's now 2021 and this topic is the first result when searching for the exact issue with Chrome. I found this is a very simple solution that works and can be slapped into your without any additional effort to at least affect Chrome page breaking in the middle of a :

<style>
@media print {
    tr, th, td {
        page-break-inside: avoid !important;
    }
}
</style>

Hopefully that helps save someone time.

score 0 · Answer 12 · edited May 15 '14 at 14:34

0

Have that issue. So long time pass... Without side-fields of page it's break normal, but when fields appears, page and "page break space" will scale. So, with a normal field, within a document, it was shown incorrect. I fix it with set

    width:100%

and use

div.page
  {
    page-break-before: always;
    page-break-inside: avoid;
  }

Use it on first line.

edited May 15 '14 at 14:34

Rich

4,134
3
26
45

answered May 15 '14 at 14:11

Intey

1

Erik · Answer 13 · 2016-04-27T09:17:22.080

0

As far as I know the only way to get the correct page breaks in tables with Google Chrome is giving it to the element <tr> the property display: inline-table (or display: inline-block but it fits better in other cases that are not tables). Also should be used the properties "page-break-after: always; page-break-inside: avoid;" as written by @Phil Ross

<table>
  <tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;">
    <td></td>
    <td></td>
    ...
  </tr>
</table>

edited Apr 27 '16 at 09:17

answered Jan 05 '16 at 18:46

Erik

82
1
1
8

1

Any hints on getting this to not break the margin/padding inside the tds? – joeforker Feb 05 '16 at 14:40
@joeforker you should use the with "padding: 0; margin: 0;" and give the margin properties to the elements contained within. – Erik Apr 27 '16 at 09:14

score 0 · Answer 14 · answered Aug 02 '22 at 05:14

0

I was printing 16 labels on A4 page landscape rotation, 4 labels per row, page was breaking in the last row and only 12 label were on one page in chrome only, I was using display:inline-block; on a div, then replaced it with float:right; and it worked!

answered Aug 02 '22 at 05:14

Junaid Shaikh

1,045
4
19

score -2 · Answer 15 · answered Nov 08 '17 at 01:23

-2

It was working for me when I used padding like:

<div style="padding-top :200px;page-break-inside:avoid;">
   <div>My content</div>
</div>

answered Nov 08 '17 at 01:23

Tuvia Khusid

1

This only worked because of the padding and not because of the page-break – Char Dec 02 '19 at 08:26

Google Chrome Printing Page Breaks

15 Answers15

Linked