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

Question

I have a bunch of paragraphs on a page:

 ... 
 ... 
 ... 

The CSS rule for those p

Answer 1

It Works for me, like this:

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

Answer 2

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

Answer 3

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());

Answer 4

For Bootstrappers, be aware that page-break-inside or others may not (highly) work under container or row or other classes of bootstrap even if you change manually the position property. When I exclude container and row, it worked like a charm!

Answer 5

This worked best for me:

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

You can also specify the height if needed.