CSS Printing Avoiding cut-in-half DIVs between pages

Question

I m writing a plug-in for a piece of software that takes a big collection of items and pops them into HTML in a WebView in Cocoa  which uses WebKit as its renderer  so basically you can assume this HTML file is being opened in Safari    The DIVs it makes are of dynamic height  but they don t vary too much  They re usually around 200px  Anyway  with around six-hundred of these items per document  I m having a really rough time getting it to print  Unless I get lucky  there s an entry chopped in half at the bottom and top of every page  and that makes actually using printouts very difficult   I ve tried page-break-before  page-break-after  page-break-inside  and combinations of the three to no avail  I think it might be WebKit not properly rendering the instructions  or maybe it s my lack of understanding of how to use them  At any rate  I need help  How can I prevent the cutting-in-half of my DIVs when printing

User · Accepted Answer

Using break-inside should work   media print     div       break-inside  avoid         It works on all major browsers   Chrome 50  Edge 12  Firefox 65  Opera 37  Safari 10   Using page-break-inside  avoid  instead should work too  but has been exactly deprecated by break-inside  avoid

User · Answer

One pitfall I ran into was a parent element having the  overflow  attribute set to  auto   This negates child div elements with the page-break-inside attribute in the print version  Otherwise  page-break-inside  avoid works fine on Chrome for me

User · Answer

page-break-inside  avoid   definitely does not work in webkit  in fact has been a known issue for 5  years now https   bugs webkit org show bug cgi id 5097  As far as my research has gone  there is no known method to accomplish this  I am working on figuring out my own hack   The advice I can give you is  to accomplish this functionality in FF  wrap the content that you don t want to break ever inside a DIV  or any container  with overflow  auto   just be careful not to cause weird scroll bars to show up by sizing the container too small      Sadly  FF is the only browser I managed to accomplish this in  and webkit is the one I am more worried about

User · Answer

The possible values for page-break-after are  auto  always  avoid  left  right      I believe that you can   t use thie page-break-after property on absolutely positioned elements

User · Answer

page-break-inside  avoid  does not seem to always work  It seems to take into account the height and positioning of container elements   For example  inline-block elements that are taller than the page will get clipped    I was able to restore working page-break-inside  avoid  functionality by identifying a container element with display  inline-block and adding     media print        container   display  block       this is key         div  p    etc   page-break-inside  avoid        Hope this helps folks who complain that  page-break-inside does not work

User · Answer

In my case I managed to fix the page break difficulties in webkit by setting my selected divs to page-break-inside avoid  and also setting all elements to display inline  So like this    media print          display inline    script  style        display none     div       page-break-inside avoid         It seems like page-break-properties can only be applied to inline elements  in webkit   I tried to only apply display inline to the particular elements I needed  but this didn t work  The only thing that worked was applying inline to all elements  I guess it s one of the large container div  that s messing things up   Maybe someone could expand on this

User · Answer

I had to deal with wkhtmltopdf too  I m using Bootstrap 3 3 7 as Framework and need to avoid page break on  row element  I did the job using those settings   myContainer       display  grid      page-break-inside  avoid     No need to wrap in  media print

User · Answer

I have the same problem bu no solution yet  page-break-inside does not work on browsers but Opera  An alternative might be to use page-break-after  avoid  on all child elements of the div to keep togehter     but in my tests  the avoid-Attribute does not work eg  in Firefox      What works in all ppular browsers are forced page breaks using eg  page-break-after  always

User · Answer

I got this problem while using Bootstrap and I had multiple columns in each rows  I was trying to give page-break-inside  avoid  or break-inside  avoid  to the col-md-6 div elements  That was not working  I took a hint from the answers given above by DOK that floating elements do not work well with page-break-inside  avoid   Instead  I had to give page-break-inside  avoid  or break-inside  avoid  to the  lt div class  quot row quot  gt  element  And I had multiple rows in my print page  That is  each row only had 2 columns in it  And they always fit horizontally and do not wrap on a new line  In another example case  if you want 4 columns in each row  then use col-md-3

User · Answer

Only a partial solution  The only way I could get this to work for IE was to wrap each div in it s own table and set the page-break-inside on the table to avoid

User · Answer

media print         use your css selector            div           page-break-inside  avoid            For all new browser this solution works  See caniuse com  search page-break-inside

User · Answer

page-break-inside  avoid  gave me trouble using wkhtmltopdf   To avoid breaks in the text add display  table  to the CSS of the text-containing div   I hope this works for you too  Thanks JohnS

[css] CSS Printing: Avoiding cut-in-half DIVs between pages?

Examples related to css

Examples related to cocoa

Examples related to printing

Examples related to page-break