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

问题

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?

回答1:

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

回答2:

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

回答3:

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.

回答4:

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

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

来源：https://stackoverflow.com/questions/3401229/page-break-insideavoid-equivalent-for-firefox-and-or-ie

标签

html

css

printing

printing-web-page