我正在为一个软件编写一个插件，它可以收集大量的项目，并将它们弹出到Cocoa WebView中的HTML中(它使用WebKit作为它的渲染器，所以基本上你可以假设这个HTML文件是在Safari中打开的)。
它生成的div具有动态高度，但变化不大。它们通常在200px左右。不管怎样，每个文档大约有600个这样的项目，我很难把它打印出来。除非我很幸运，否则每页的底部和顶部都有一个条目被切成两半，这使得实际使用打印输出非常困难。
我尝试过前破页、后破页、内破页，三种方法的组合都没有用。我认为可能是WebKit没有正确地呈现指令，或者可能是我对如何使用它们缺乏理解。无论如何，我需要帮助。如何防止打印时DIVs减半?
当前回答
我在使用Bootstrap时遇到了这个问题，我在每一行中都有多列。
我试着给page-break-inside: avoid;或破门而入:避免;到col-md-6 div元素。这是行不通的。
我从上面DOK给出的答案中得到了一个提示，浮动元素与page-break-inside不能很好地工作:避免;。
相反，我不得不给出“page-break-inside”:avoid;或破门而入:避免;到<div class="row">元素。打印页面中有多行。
也就是说，每行只有两列。而且它们总是水平贴合，不会缠绕在新的线条上。
在另一个例子中，如果您希望每行有4列，那么使用col-md-3。
其他回答
page-break-inside:避免;绝对不能在webkit中工作，事实上已经是一个已知的问题5年多了https://bugs.webkit.org/show_bug.cgi?id=5097
就我的研究而言，还没有已知的方法来实现这一点(我正在研究自己的破解方法)
我可以给你的建议是，要在FF中实现这个功能，用overflow: auto(注意不要因为容器大小太小而导致奇怪的滚动条显示)来包装您不想在DIV(或任何容器)中中断的内容。
遗憾的是，FF是我唯一能做到这一点的浏览器，而webkit是我更担心的一个。
我遇到的一个陷阱是父元素将“overflow”属性设置为“auto”。这将在打印版本中否定带有page-break-inside属性的子div元素。否则，page-break-inside: avoid在Chrome上对我来说很好。
我在使用Bootstrap时遇到了这个问题，我在每一行中都有多列。
我试着给page-break-inside: avoid;或破门而入:避免;到col-md-6 div元素。这是行不通的。
我从上面DOK给出的答案中得到了一个提示，浮动元素与page-break-inside不能很好地工作:避免;。
相反，我不得不给出“page-break-inside”:avoid;或破门而入:避免;到<div class="row">元素。打印页面中有多行。
也就是说，每行只有两列。而且它们总是水平贴合，不会缠绕在新的线条上。
在另一个例子中，如果您希望每行有4列，那么使用col-md-3。
可能的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; }
}
希望这能帮助那些抱怨“页面突破不工作”的人。
