разрыв страницы: избегайте эквивалента для Firefox и / или IE

Question

Я понимаю, что инструкция CSS page-break-inside:avoid должна предотвращать разрыв страницы внутри элемента div при печати документа HTML.Посредством поиска в интернете я обнаружил, что он поддерживается только Opera и IE8.Есть ли обходной путь, который позволяет мне предотвращать разрывы страниц в Firefox (3.6) или версиях IE менее 8?

Answer 1

Извините, мой ответ "не возможен", хотя я хотел бы, чтобы кто-нибудь смог доказать, что я не прав.

Я столкнулся с той же проблемой в последнее время и после небольшого исследованияЯ решил просто использовать

page-break-after: always;

после каждого нескольких элементов.

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

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

Answer 2

Для всего, что не является firefox,

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

будет работать.Но не для Firefox.В Firefox вам нужно будет проверить высоту, а затем добавить page-break-after: always;, когда это уместно.

В среднем, поле будет 1 дюйм сверху и снизу.Итак, чтобы измерить, сколько пикселей потребляет 10-дюймовая страница, я использовал это:

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);
})();

У меня было много элементов div, в каждом из которых было много абзацев.Поэтому я перебрал их, а затем сравнил их текущую высоту на текущей странице со значением pageOfPixels.

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;
    }
});

Это сработало для меня в Firefox.

Answer 3

Попробуйте использовать white-space:nowrap вместо этого.Это должно предотвратить разрыв текста внутри элемента, по крайней мере, на экране.Я не уверен, как это переводится в печатные СМИ, но стоит попробовать.

Answer 4

Как насчет того, чтобы просто сопоставить все элементы внутри вашего элемента, кроме первых, и сделать так, чтобы они не прерывались до

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