Home » Html » page-break-inside doesn't work in Chrome?

page-break-inside doesn't work in Chrome?

Posted by: admin November 29, 2017 Leave a comment

Questions:

I have a bunch of paragraphs on a page:

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

The CSS rule for those paragraphs is:

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, the above should ensure that no paragraph is split between two pages. (A paragraph is either displayed on the “current” page, or if it doesn’t fit completely, it’s moved to the next page.)

This doesn’t seem to work in Chrome. Open the demo, right-click the page, choose “Print…”. You’ll see a print preview – the fifth paragraph is split between page 1 and 2.

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


Answers:

Actually, 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 (or in fullscreen)

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!!!

Questions:
Answers:

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

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

Other references:

http://www.webdevout.net

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

Stack Overflow threads:

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

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

Google Chrome Printing Page Breaks

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

Google Chrome Forum:

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

I will not post the W3Schools link (due to general unreliability) but they also state it’s only supported in Opera, for whatever it’s worth.

Questions:
Answers:

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

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

It’s possible to get around this by explicitly defining the height the element you don’t want broken up. jQuery example:

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

Questions:
Answers:

I just tested this with a larger paragraph in IE9, Chrome 14 and Firefox 7, and it looks like only IE9 works as expected. You might have to resort to adding page breaks manually where you want them with

page-break-after:always

Of course that’s only any good to you if you know the content length in advance.

Questions:
Answers:

It Works for me, like this:

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

Questions:
Answers:

I’ve been fighting with this for a while and as well as follow the advice in the other answers I had to make sure that the element and all parent elements had the styling Display: block;.