Chrome missing page scroll function?

Question

I have a bunch of paragraphs on the page:

<p> ... </p> <p> ... </p> <p> ... </p> 

CSS rule for these paragraphs:

 p { margin: 20px 0; page-break-inside: avoid; } 

Live demo: http://jsfiddle.net/KE9je/2/show/

If I understand the page-break-inside property correctly, this should ensure that the paragraph is not split between the two pages. (The paragraph either appears on the "current" page, or if it does not fit completely, it has moved to the next page.)

On Chrome, this does not work. Open the demo, right-click on the page, select "Print ...". You will see a print preview - the fifth paragraph is divided between pages 1 and 2.

What am I doing wrong? How can I make this work in Chrome?

---

Answer 1

In fact, it works in Chrome, and the solution is really stupid !!

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

 position: relative; 

Check out this fiddle (or in full screen )

This is true for:

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

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

Hope this helps !!!

Answer 2

This worked better for me:

 .no-page-break { display: inline-block; width: 100%; page-break-inside: avoid; } 

You can also specify height if necessary.

Answer 3

According to SitePoint, Chrome is not supported here, only Opera (and IE 8 buggy) ...

http://reference.sitepoint.com/css/page-break-inside

Other links:

http://www.webdevout.net

http://www.reddit.com/r/css/comments/jdeim/pagebreakinside_avoid_doesnt_work/

Streams:

Cross-browser support` page-break-inside: avoid; `

"page-break-inside: avoid" - does not work

Google Chrome Print Page Violations

Which browsers support page break manipulation using CSS and the page break element?

Google Chrome Forum:

http://www.google.com/support/forum

I will not post the W3Schools link (due to general insecurity), but they also declare that it is only supported in Opera, no matter what it costs.

Answer 4

I know this is an old question, but Chrome has changed since it was originally answered, and this may help.

It seems that page-break-inside:avoid works in Chrome based on the height of the element, so if you float a bunch of elements in a div, page-break-inside:avoid will not work.

You can get around this by explicitly determining the height of the element that you do not want to split. JQuery example:

 $('#page_break_inside_avoid_element').height($('#page_break_inside_avoid_element').height()); 

Answer 5

I just tested this with a large paragraph in IE9, Chrome 14, and Firefox 7, and it seems that only IE9 works as expected. You may have to resort to manually adding page breaks wherever you want them with

 page-break-after:always 

Of course, this is just any good for you if you know the length of the content in advance.

Answer 6

What worked for me (in FFox and Chrome, i.e.)

 .container { column-gap: .4em; columns: 3; padding: .4em; } .contained { page-break-before: avoid; page-break-inside: avoid; page-break-after: always; } 

And that is it; I did not need a position .

Answer 7

This works for me, for example:

 .print{position: absolute;} .print p{page-break-inside: avoid} 

Answer 8

I struggled with this for a while, as well as following the tips in other answers that I had to make sure that the element and all the parent elements are in the Display: block; style Display: block; .

Answer 9

check if the parent (or top-level container) is a flex display; delete it and try again ； works for me in chrome71