CSS打印：避免在页面之间剪切半个div？

我正在为一个软件编写一个插件，该软件在Cocoa的WebView中获取大量项目并将它们弹出到HTML中（它使用WebKit作为其呈现程序，因此基本上可以假设此HTML文件是在Safari中打开的）

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

我以前尝试过分页符，之后尝试过分页符，内部尝试过分页符，三者的组合都没用。我想可能是WebKit没有正确地呈现说明，或者是我不了解如何使用它们。无论如何，我需要帮助。如何防止打印时将div的一半切掉？

使用以下方法应该有效：

@媒体打印{
div{
破门而入：避免；
}
}

它的作用是：

• 铬50+
• 边缘12+
• 火狐65+
• 歌剧37+
• 狩猎10+

---

在内部使用

分页符：避免

也应该起作用，但已在

内部中断：avoid

之后的分页符可能值为：

自动、始终、避免、左、右

---

我相信你不能在绝对定位元素上使用分页符after属性。

我也有同样的问题，但还没有解决方案。内部分页符不适用于浏览器，但适用于Opera。另一种方法是在以下情况下使用分页符：避免；在div的所有子元素上保持一致。。。但是在我的测试中，避免属性不起作用，例如在Firefox中

---

在所有ppular浏览器中都可以使用的是强制分页符，例如：始终之后分页符：只有部分解决方案：我能让IE实现这一点的唯一方法是将每个div包装在自己的表中，并在表内部设置分页符以避免；在webkit中肯定不起作用，事实上这已经是5年多以来的一个已知问题了

就我的研究而言，还没有已知的方法来实现这一点（我正在研究自己的破解方法）

我可以给你的建议是，为了在FF中实现这一功能，包装你不需要的内容；我不想在一个DIV（或任何容器）中使用overflow:auto（注意不要因为容器太小而导致奇怪的滚动条出现）

---

遗憾的是，FF是我唯一一个在中实现这一点的浏览器，而webkit是我更担心的浏览器。

在我的例子中，我通过将我选择的div设置为page break-inside:avoid，并将所有元素设置为display:inline，解决了webkit中的分页符问题。所以像这样：

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

}

似乎分页符属性只能应用于内联元素（在webkit中）。我试图只将display:inline应用于我需要的特定元素，但这不起作用。唯一有效的方法是将内联应用于所有元素。我猜这是一个大集装箱部门把事情搞砸了

---

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

内部分页符：避免给了我使用wkhtmltopdf的麻烦

为避免文本中断，添加

display:table

到包含div的文本的CSS

---

我希望这对你也有用。谢谢约翰。

我遇到的一个陷阱是父元素的“overflow”属性设置为“auto”。这将使用打印版本中的内部分页符属性否定子div元素。否则，

分页符inside:avoid

对我来说在Chrome上很好用

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

---

对于所有新浏览器，此解决方案都有效。参见caniuse.com/#search=内部分页符

内部分页符：避免似乎并不总是有效。它似乎考虑了容器元素的高度和位置

例如，
内联块
高于页面的元素将被剪裁

我能够恢复工作
内的分页符：避免功能通过使用
显示：内联块
标识容器元素并添加：

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

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

希望这能帮助那些抱怨“内部分页符不起作用”的人。
我也不得不处理wkhtmltopdf

我使用Bootstrap3.3.7作为框架，需要避免在.row元素上出现分页符

我使用这些设置完成了工作：

.myContainer{
显示：网格；
内部分页符：避免；
}

无需在@media print中换行
我在使用Bootstrap时遇到了这个问题，每行有多个列

我试图在里面给
分页符：避免或
内部中断：避免到
col-md-6
div元素。那是行不通的

我从上面给出的答案中得到了一个提示，浮动元素不能很好地与
内部分页符配合使用：避免

相反，我不得不在内部给
分页符：避免或
内部中断：避免
到
元素。我的打印页面中有多行

也就是说，每个行中只有2列。而且它们总是水平贴合，不会缠绕在新的线条上

在另一个示例中，如果您希望每行有4列，请使用
col-md-3
提供一个示例文档，说明您看到的问题，也许我们可以提供帮助！我在这里回答了一个关于避免将div一分为二的非常类似的问题：注意：这个属性不能用于绝对定位（显然也用于内联块）元素。这应该适用于Webkit。不过，您可能需要添加一些额外的div，以便在以下情况下使用分页符打印：始终；在你的六次常规潜水之后。@easwee:than