我正在为一个软件编写一个插件，它可以收集大量的项目，并将它们弹出到Cocoa WebView中的HTML中(它使用WebKit作为它的渲染器，所以基本上你可以假设这个HTML文件是在Safari中打开的)。
它生成的div具有动态高度，但变化不大。它们通常在200px左右。不管怎样，每个文档大约有600个这样的项目，我很难把它打印出来。除非我很幸运，否则每页的底部和顶部都有一个条目被切成两半，这使得实际使用打印输出非常困难。
我尝试过前破页、后破页、内破页，三种方法的组合都没有用。我认为可能是WebKit没有正确地呈现指令，或者可能是我对如何使用它们缺乏理解。无论如何，我需要帮助。如何防止打印时DIVs减半?
当前回答
我遇到的一个陷阱是父元素将“overflow”属性设置为“auto”。这将在打印版本中否定带有page-break-inside属性的子div元素。否则，page-break-inside: avoid在Chrome上对我来说很好。
其他回答
我也有同样的问题，但还没有解决办法。page-break-inside不能在浏览器上工作，但在Opera上。另一种选择可能是使用page-break-after: avoid;在div的所有子元素上保持在一起…但在我的测试中，回避属性不起作用。在Firefox中…
在所有流行的浏览器中工作的是强制换页，使用例如。page-break-after:总是
@media print{
/* use your css selector */
div{
page-break-inside: avoid;
}
}
这个解决方案适用于所有新浏览器。看到搜索= page-break-inside caniuse.com/ #
我遇到的一个陷阱是父元素将“overflow”属性设置为“auto”。这将在打印版本中否定带有page-break-inside属性的子div元素。否则，page-break-inside: avoid在Chrome上对我来说很好。
page-break-inside:避免;给我麻烦使用wkhtmltopdf。
为避免文本中出现断行，添加display: table;到包含文本的div的CSS。
我希望这对你也有用。谢谢你约翰。
编辑:建议将此添加到媒体块中，以不破坏现有的样式。即
@media print {
div.my-div {
display: table
}
}
只有一个部分的解决方案:我能让它在IE中工作的唯一方法是将每个div包装在它自己的表中，并在表中设置分页内以避免。
