page-break-inside:avoid equivalent for Firefox and/or IE

Question

I understand that the CSS page-break-inside:avoid instruction is supposed to prevent a page break within a div when an HTML document is printed. Through searching the internet, I have found that it is only supported by Opera and IE8. Is there a work around that allows me to prevent page breaks in Firefox (3.6) or IE versions less than 8?

Sorry, no solution but it does work for me in Mac OS Firefox 3.6.10 but freezes-up in Mac OS Opera 10.62, doesn't work in Safari. — daustin777, Oct 07 '10 at 23:59

score 3 · Answer 1 · answered Mar 27 '12 at 18:58

3

Sorry, my answer is "not possible", although I'd love it if anyone can prove me wrong.

I've ran into the same problem lately, and after doing a little bit of research I decided to just go with

page-break-after: always;

after every several number of elements.

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

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

answered Mar 27 '12 at 18:58

Scott Yang

2,348
2
18
21

Let me add that it's seemingly still not implemented in Firefox 54 – Wolf Jun 26 '17 at 08:35

score 2 · Answer 2 · answered Apr 06 '12 at 22:06

Try using white-space:nowrap instead. This should stop text from breaking inside the element, at least while on screen. I'm not sure how it translates to print media, but it's worth a try.

More info: http://www.blooberry.com/indexdot/css/properties/text/whitespace.htm

score 2 · Answer 3 · answered Jan 15 '13 at 23:40

For anything which is not firefox,

.dontsplit { border: 2px solid black; page-break-inside: avoid; }

will work. But not for firefox. In firefox, what you are going to have to do is check for the height and then add page-break-after: always; when it is relevant.

On average, the margin will be 1 inch on top and bottom. So, to measure how many pixels a 10 inch page would consume, I used this:

var pageOfPixels;
(function(){
    var d = document.createElement("div");
    d.setAttribute("style", "height:9in;position:absolute;left:0px;top:0px;z-index:-5;");
    document.body.appendChild(d);
    pageOfPixels = $(d).height();
    d.parentNode.removeChild(d);
})();

I had a lot of divs each with a lot of paragraphs in them. So what I did was I iterated through them, and then compared the current height of the them on the current page to the pageOfPixels value.

var currentPosition = 0;
$('.printDiv').each(function (index, element) {
    var h = $(this).height();
    if (currentPosition + h > pageOfPixels) {
        //add page break
        $('.printDiv').eq(index - 1).css("page-break-after", "always");
        currentPosition = h;
    } else {
        currentPosition += h;
    }
});

This worked for me in firefox.

score 0 · Answer 4 · edited Jun 26 '17 at 08:33

0

How about just matching all element inside your element, except the first ones, and have them not break-before

#yourelement *+*{
    page-break-before: avoid;
}

edited Jun 26 '17 at 08:33

Wolf

9,679
7
62
108

answered Apr 16 '11 at 19:02

Gerben

16,747
6
37
56

The question is asking about FF and old IE compatability, not how to use the css property. – aaaidan Oct 10 '11 at 21:00
Note that I'm using page-break-before, not page-break-inside which is not supported, that's why you have to use this strange selector to get the same effect. Secondly this post is almost 6 months old. – Gerben Oct 11 '11 at 16:40
1

This won't work for ≤IE7 and Firefox [doesn't support](https://bugzilla.mozilla.org/show_bug.cgi?id=132035) `avoid` either. – Knu Feb 03 '12 at 22:43
...and `avoid` *still* isn't supported in Firefox (45) – ben3000 Dec 19 '15 at 08:19

page-break-inside:avoid equivalent for Firefox and/or IE

4 Answers4

Linked

Related