Page-break-inside:avoid not working

Question

I have a print stylesheet for my (Wordpress) site, and I want images to print on a single page rather than being split across pages. In some cases, even lines of text are being split across pages. I've included img {page-break: avoid;) in my print stylesheet, but no luck. I've found some previous answers but they're kind of old.

Is there a reliable way to print a moderately-sized image on a single page rather than splitting it across pages? Why are lines of text breaking across pages?

Site: http://74.220.217.211/housing-developments/grafton-townhomes/

Related posts:

• Print styles: How to ensure image doesn't span a page break

• What are most useful media="print" specfic ,cross browser compatible css properties?

• What is the correct way to do the CSS to avoid page breaks?

• page-break-inside doesn't work in Chrome?
• Work around for page-break-inside:avoid

Answer 1

It could be that the parent element of the img element has style:

display: flex

Then the break-inside doesn’t work.

For example if you change parent element display style to:

display: block

Then it will work.

Answer 2

Different browsers have weird limitations for page-break-inside: avoid. Following limitations have been suggested in different articles:

• If the document tree has the parent or grandparent with display:flex or display:grid, avoiding page-breaks will not work.
• If the parent element has display:inline-block, avoid doesn't work.
• In some cases, parent element needs position:relative for the value avoid to work in children. (Exact rules unknown.)
• In some cases, both the parent element and the element that needs to avoid breaking needs position:relative for the value avoid to work. (Exact rules unknown.)
• The parent element MUST NOT have display: inline-block.
• The element MUST NOT have display:table-cell.

In short, @media print styles should probably avoid using float, flex, grid, position:absolute and position:sticky if you need to use page-break-inside: avoid. For best compatibility with different browsers, try to define whole tree from root to parent with display:block and the element that shouldn't break with display:inline-block in addition to page-break-inside: avoid.

None of the above exceptions are part of any specs so these are just bugs or limitations in browser implementations.

Also note that even though latest specs prefer break-inside: avoid instead of page-break-inside: avoid the real world browser supports is still pretty bad. I would recommend declaring both:

.nobreak
{
  page-break-inside: avoid;
  break-inside: avoid
}

Answer 3

I think the problem may come from the position property of elements. The element you don't want to break at page end and its parent should be declared as:

position: relative;

The rest of code styles is right and should looks like

@media print {
    img {
        page-break-before: auto;
        page-break-after: auto; 
        page-break-inside: avoid;
        position: relative;
    }
}

Answer 4

Try this:

.site-container, .site-inner (heck body tag possibly) {position:relative;}

p {
    page-break-inside: avoid;
    position: relative; 
}

Check this FIDDLE

Add that in your print media

I just review this in Chrome and it looks fine minus the image which also needs this:

img {
    page-break-before: auto;
    page-break-after: auto; 
    page-break-inside: avoid;
    display: block;
}

Lastly Wordpress has this but in reality not sure if it helps...

 <!--nextpage-->

Answer 5

img {
    page-break-before: auto;
    page-break-after: auto; 
    page-break-inside: avoid;
    display: block;
}

this will work

Answer 6

Use @media print and set a suitable height for the page body element or set small size for the image

For example:

@media print{
body{
height: 800px;
}
}