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

Here is how I solved this while writing a css for printing.

For example, you put some pictures in an HTML file like this:

    

        
        
Front View
        
    

        
        
Rear View
    

And write the css like this:

.bottom figure{
  page-break-inside: avoid;
}

Sometimes it won’t work as you expect, because the default value of display for most elements is block or inline, which is not ‘page-break friendly’. I usually change it like this:

.bottom{
    display: contents;
}

This aims to disappear the container, making the child elements children of the element the next level up in the DOM.

As for your question, I suggest you to have a look at the display mode of the container of the paragraph to see whether it is set to block. If so, change it to contents and try again.

I hope this help.