我正在为一个软件编写一个插件,它可以收集大量的项目,并将它们弹出到Cocoa WebView中的HTML中(它使用WebKit作为它的渲染器,所以基本上你可以假设这个HTML文件是在Safari中打开的)。

它生成的div具有动态高度,但变化不大。它们通常在200px左右。不管怎样,每个文档大约有600个这样的项目,我很难把它打印出来。除非我很幸运,否则每页的底部和顶部都有一个条目被切成两半,这使得实际使用打印输出非常困难。

我尝试过前破页、后破页、内破页,三种方法的组合都没有用。我认为可能是WebKit没有正确地呈现指令,或者可能是我对如何使用它们缺乏理解。无论如何,我需要帮助。如何防止打印时DIVs减半?


当前回答

可能的page-break-after值有:auto、always、avoid、left、right

我认为你不能在绝对定位的元素上使用page-break-after属性。

其他回答

page-break-inside:避免;似乎并不总是有效。它似乎考虑到了容器元素的高度和位置。

例如,比页面高的内联块元素将被剪切。

我能够恢复工作页面打破内部:避免;通过使用display: inline-block标识容器元素并添加:

@media print {
    .container { display: block; } /* this is key */

    div, p, ..etc { page-break-inside: avoid; }
}

希望这能帮助那些抱怨“页面突破不工作”的人。

我也有同样的问题,但还没有解决办法。page-break-inside不能在浏览器上工作,但在Opera上。另一种选择可能是使用page-break-after: avoid;在div的所有子元素上保持在一起…但在我的测试中,回避属性不起作用。在Firefox中…

在所有流行的浏览器中工作的是强制换页,使用例如。page-break-after:总是

在我的案例中,我通过设置我所选择的div为page-break-inside:avoid,并将所有元素设置为display:inline来解决webkit中的分页困难。就像这样:

@media print{
* {
    display:inline;
}
script, style { 
    display:none; 
}
div {
    page-break-inside:avoid;
}

}

似乎page-break-properties只能应用于内联元素(在webkit中)。我试着只对我需要的特定元素应用display:inline,但这不起作用。唯一有效的方法是将内联应用于所有元素。我猜是一个大容器div'把事情搞砸了。

也许有人可以对此进行详细解释。

只有一个部分的解决方案:我能让它在IE中工作的唯一方法是将每个div包装在它自己的表中,并在表中设置分页内以避免。

我遇到的一个陷阱是父元素将“overflow”属性设置为“auto”。这将在打印版本中否定带有page-break-inside属性的子div元素。否则,page-break-inside: avoid在Chrome上对我来说很好。