Alternative to Page-Break-Inside:Avoid Because of Compatibility Issues

Alternative for page-break-inside: avoid

Why not, after the page is loaded with your content, use js to scroll through the content and add up the height of the divs.

Once you've reached 1000px or whatever you've determined to be the page height, then insert a blank div styled with page-break-before before the latest div.

Page-break-inside not working in firefox

MDN says that Firefox 19 is the earliest version to support the page-break-inside property. Looks like you're out of luck.

https://developer.mozilla.org/en-US/docs/CSS/page-break-inside

Maybe you can find something useful from this question: alternative to page-break-inside:avoid because of compatibility issues

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

Webdevout.net is a great place to check browser CSS compatibility.

For page-break-inside only IE8 and Opera 8+ are shown to support it

Print html div without breaking its contents between two pages

Your best bet is this (but has compatibility issues)

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

Current compatibility (source):

Chrome     Firefox (Gecko)    Internet Explorer    Opera     Safari (WebKit)
1.0        19.0 (19)          8.0                  7.0       1.3 (312)

Other SO Discussion: alternative to page-break-inside:avoid because of compatibility issues

W3Schools

How to prevent column break within an element?

The correct way to do this is with the break-inside CSS property:

.x li {
    break-inside: avoid-column;
}

Unfortunately, as of October 2021, this is still not supported in Firefox but it is supported by every other major browser. With Chrome, I was able to use the above code, but I couldn't make anything work for Firefox (See Bug 549114).

The workaround you can do for Firefox if necessary is to wrap your non-breaking content in a table but that is a really, really terrible solution if you can avoid it.

UPDATE

According to the bug report mentioned above, Firefox 20+ supports page-break-inside: avoid as a mechanism for avoiding column breaks inside an element but the below code snippet demonstrates it still not working with lists:

.x {
    column-count: 3;
    width: 30em;
}

.x ul {
    margin: 0;
}

.x li {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -moz-page-break-inside:avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
        <li>Number three</li>
    </ul>
</div>

---

Related Topics