Question

据我所知，CSS page-break-inside:avoid指令可以防止打印HTML文档时div中的分页符。通过搜索互联网，我发现只有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

请尝试使用white-space:nowrap。这应该可以阻止文本在元素内部破坏，至少在屏幕上是这样。我不确定它是如何转换为印刷媒体的，但值得一试。

更多信息：http://www.blooberry.com/indexdot/css/properties/text/whitespace.htm

Answer 3

对于任何不是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，每个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 4

如何只匹配元素中的所有元素（第一个元素除外），并让它们不会中断

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

page-break-inside：避免使用Firefox和/或IE

4 个答案: