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

User · Answer

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!

User · Answer

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

User · Answer

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     lt div style  display inline-block  gt     lt table style  page-break-before always  gt             lt  table gt     lt table style  page-break-before always  gt             lt  table gt   lt  div gt    But the following work     lt div gt     lt table style  page-break-before always  gt             lt  table gt     lt table style  page-break-before always  gt             lt  table gt   lt  div gt

User · Answer

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

User · Answer

I ve used the following approach successfully in all major browsers including Chrome    lt  DOCTYPE html gt    lt html gt     lt head gt       lt meta http-equiv  content-type  content  text html charset UTF-8    gt       lt title gt Paginated HTML lt  title gt       lt style type  text css  media  print  gt        div page                 page-break-after  always          page-break-inside  avoid               lt  style gt     lt  head gt     lt body gt       lt div class  page  gt         lt h1 gt This is Page 1 lt  h1 gt       lt  div gt       lt div class  page  gt         lt h1 gt This is Page 2 lt  h1 gt       lt  div gt       lt div class  page  gt         lt h1 gt This is Page 3 lt  h1 gt       lt  div gt     lt  body gt   lt  html gt    This is a simplified example  In the real code  each page div contains many more elements

User · Answer

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

User · Answer

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  lt tr gt  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   lt table gt     lt tr style  display inline-table page-break-after  always  page-break-inside  avoid   gt       lt td gt  lt  td gt       lt td gt  lt  td gt             lt  tr gt   lt  table gt

User · Answer

I had an issue similar to this but I found the solution eventually  I had overflow-x  hidden  applied to the  lt html gt  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

User · Answer

It was working for me when I used padding like    lt div style  padding-top  200px page-break-inside avoid   gt      lt div gt My content lt  div gt   lt  div gt

User · Answer

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

User · Answer

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

User · Answer

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    lt  DOCTYPE html gt    lt html gt     lt head gt       lt meta http-equiv  content-type  content  text html charset UTF-8    gt       lt title gt Paginated HTML lt  title gt       lt style type  text css  media  print  gt        div page                 page-break-after  always          page-break-inside  avoid               lt  style gt     lt  head gt     lt body gt       lt div class  page  gt         lt h1 gt This is Page 1 lt  h1 gt       lt  div gt        lt table gt       lt tr gt           lt td gt               lt div class  page  gt                 lt h1 gt This is Page 2 lt  h1 gt               lt  div gt               lt div class  page  gt                 lt h1 gt This is  sadly  still Page 2 lt  h1 gt               lt  div gt           lt  td gt       lt  tr gt       lt  table gt     lt  body gt   lt  html gt    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 amp hl en

[css] Google Chrome Printing Page Breaks

Examples related to css

Examples related to printing

Examples related to google-chrome