Best IT Recipes

Page breaks in Google Chrome

I am trying to get google chrome to make page breaks.

I was informed through a bunch of websites that page-break-after: always; valid in chrome, but I can't get it to work even with a very simple example. is there any way to force a page break when printing in chrome?

+83
css google-chrome printing
Oct 27 '09 at 13:32
source share
13 answers

I have successfully used the following approach 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 real code, each div page contains many more elements.

+104
Oct 29 '09 at 22:55
source share

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

it works in Chrome and the solution is really stupid !!

Both the parent and the element you want to control page breaks should be declared as:

 position: relative

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

This is true for:

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

However, paging control inside Safari does not work (at least in 5.1.7)

Hope this helps !!!

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

 -webkit-region-break-inside: avoid;

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

so I think we should add this now ...

Hope this helps!

+29
Sep 12
source share

I have the problem itself: my page breaks work in every browser, but in Chrome - and were able to isolate it to the page element that is inside the table cell. (Old, inherited templates in CMS.)

Apparently, Chrome does not comply with the drag and drop properties of the page or earlier than in the cells of the table, so this modified version of Phil's example puts the second and third headings 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>

The implementation of Chrome (with doubt) is allowed based on the CSS specification - here you can see more: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=en

+10
May 14 '10 at 9:01 a.m.
source share

I just wanted to notice that Chrome also ignores the page-break- * css settings in floating boards.

I suspect there is a reasonable rationale for this somewhere in the css spec, but I thought it might help someone someday; -)

One more note: IE7 cannot confirm 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/

+10
Jul 14 '11 at 10:23
source share

I had a problem like this, but I found a solution in the end. I had overflow-x: hidden; applied to <html> so no matter what I did below in the DOM, it will never allow page breaks. Returning to overflow-x: visible; It worked fine.

Hope this helps someone out there.

+8
Mar 12 '12 at 16:17
source share

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

No CCS property to go to the next page will work for me in Chrome and Firefox if my table is inside a div with display:inline-block style

For example, the following does not 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>
+4
Jun 03 '14 at 13:48
source share

I ran into this problem on chrome before, and the reason for this is because the div had a minimum height set to a value. The solution was reset min-height when printing as follows:

 @media print { .wizard-content{ min-height: 0; } }
+3
Sep 06 '15 at 15:43
source share

2016 update:

Well, I had this problem when I had

 overflow:hidden

in my div.

After i did

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

everything became beautiful and beautiful

+3
Jun 06 '16 at 12:51 on
source share

It seems like this is relatively recent (February 2014) was discussed (by the old bit of 2005) on the bug tracking web tracker

https://bugs.webkit.org/show_bug.cgi?id=5097

+1
Apr 21 '14 at 10:20
source share

If you use Chrome with Bootstrap Css, classes that control the layout of the grid, such as col-xs-12, etc., use "float: left," which others have pointed out to break page breaks. Remove them from your print page. It worked for me. (In Chrome version = 49.0.2623.87)

+1
Aug 29 '16 at 7:28
source share

Take this problem. It took so long ... Without the side margins of the page, it breaks normally, but when the margins appear, the page and the "page break space" will scale. Thus, with a normal field inside the document it was shown incorrectly. I fix it with a set

  width:100%

and use

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

Use it on the first line.

0
May 15 '14 at 14:11
source share

As far as I know, the only way to get the correct page breaks in tables with Google Chrome is to provide the <tr> element with the display: inline-table property (or show: inline -block, but it works better in other cases that are not tables). You should also use 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>
0
Jan 05 '16 at 18:46
source share

This worked for me when I used the add-on, for example:

 <div style="padding-top :200px;page-break-inside:avoid;"> <div>My content</div> </div>
0
Nov 08 '17 at 1:23
source share


More articles:


All Articles