CSS打印：避免在页面之间插入一半的DIV？

我正在为一款软件编写插件，该插件需要大量项目并将其弹出到Cocoa中的WebView中的HTML中（该WebView使用WebKit作为其渲染器，因此基本上您可以假定正在以下位置打开该HTML文件）苹果浏览器）。

它制作的DIV具有动态高度，但变化不大。它们通常在200像素左右。无论如何，每个文档中有大约六百个这样的项目，所以我很难过要打印它。除非我很幸运，否则每页底部和顶部都有一个条目被切成两半，这使得使用打印输出变得非常困难。

我尝试过分页之前，分页之后，分页内部以及这三者的组合均无济于事。我认为可能是WebKit无法正确呈现指令，或者可能是我对如何使用它们缺乏了解。无论如何，我需要帮助。打印时如何防止DIV切入一半？

这应该工作：

@media print  
{
    div{
        page-break-inside: avoid;
    }
}

请注意当前的浏览器支持（2014年12月3日）：

• 铬-1.0+
• Firefox（壁虎）-19.0+
• Internet Explorer-8.0+
• 歌剧-7.0+
• Safari-1.3+（312）

只是部分解决方案：我可以使此方法适用于IE的唯一方法是将每个div包装在其自己的表中，并在表上设置page-break-inside以避免。

page-break-inside: avoid; 使用wkhtmltopdf给我带来麻烦。

为了避免文本中断，请添加display: table;到包含文本的div的CSS中。

我希望这也对您有用。谢谢约翰·S。

page-break-inside：避免；绝对不能在webkit中工作，事实上，已经有5年以上的已知问题了https://bugs.webkit.org/show_bug.cgi?id=5097

就我的研究而言，没有已知的方法可以完成此操作（我正在研究自己的黑客方法）

我可以给您的建议是，要在FF中完成此功能，请包装您不想要的内容；不要在DIV（或任何容器）中以溢出的方式破坏它：auto（请小心不要使怪异的滚动条通过将容器的尺寸设置得太小来显示）。

遗憾的是，FF是我设法完成此操作的唯一浏览器，而Webkit是我更担心的浏览器。

page-break-after的可能值为： auto, always, avoid, left, right

我相信您不能在绝对定位的元素上使用thie page-break-after属性。

我有相同的问题，但尚未解决。page-break-inside在Opera上不起作用。另一种选择是使用分页后：在div的所有子元素上保持一致...但是在我的测试中，eggate-Attribute不起作用。在Firefox中...

在所有ppular浏览器中有效的是使用eg强制分页。分页后：始终

我遇到的一个陷阱是父元素的“溢出”属性设置为“自动”。这会在打印版本中使用page-break-inside属性来否定子div元素。否则，page-break-inside: avoid对我来说可以在Chrome上正常运行。

就我而言，我设法通过将选定的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之一。

也许有人可以对此进行扩展。

@media print{
    /* use your css selector */    
    div{ 
        page-break-inside: avoid;
    }
}

对于所有新浏览器，此解决方案均适用。参见caniuse.com/#search=page-break-inside

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

例如，inline-block比页面高的元素将被裁剪。

我能够page-break-inside: avoid;通过标识容器元素display: inline-block并添加以下内容来恢复工作功能：

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

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

希望这对抱怨“ page-break-inside不起作用”的人们有所帮助。