CSS 打印：避免页面之间的 DIV 减半？答案

【问题标题】：CSS Printing: Avoiding cut-in-half DIVs between pages?CSS 打印：避免页面之间的 DIV 减半？
【发布时间】：2010-10-28 19:19:36
【问题描述】：

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

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

我尝试了 page-break-before、page-break-after、page-break-inside 以及这三者的组合，但均无济于事。我认为可能是 WebKit 没有正确呈现指令，或者可能是我对如何使用它们缺乏了解。无论如何，我需要帮助。如何防止打印时将 DIV 切成两半？

【问题讨论】：

提供您遇到的问题的示例文档，也许我们可以提供帮助！
我在这里回答了一个关于避免将 div 切成两半的非常相似的问题：stackoverflow.com/a/14348953/1026459
注意：此属性不能用于绝对定位（显然也用于内联块）元素。

标签： css cocoa printing page-break

【解决方案1】：

使用break-inside 应该可以：

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

它适用于all major browsers：

铬 50+
边缘 12+
火狐 65+
Opera 37+
Safari 10+

改用page-break-inside: avoid; 也应该可以，但break-inside: avoid 一直是exactly deprecated。

【讨论】：

它应该工作。但事实并非如此。有关浏览器支持，请参阅 en.wikipedia.org/wiki/…。
适用于 Safari 6 :) 现在处于开发者预览版中
也适用于 Netscape。谢谢！
为什么需要媒体打印？如果不使用媒体打印，直接在div上应用规则，是不是也一样？
根据 MDN，bage-break-inside 被替换为 break-inside，但这两者都还不是生活标准。最好同时使用两者以获得更好的支持。链接：developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside developer.mozilla.org/en-US/docs/Web/CSS/break-inside

【解决方案2】：

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

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

我希望这也适用于你。谢谢约翰。

【讨论】：

在<div> 元素上使用page-break-before: always; 时，我几乎放弃了到处出现的无法解释的空格。通过大量 SO 帖子、文章、官方文档等进行搜索。没有任何帮助。但是你，我的朋友，终于带着我真正需要的东西来了！不能感谢你，伙计！！我希望我至少能给你一杯咖啡，来自印度的爱！
是的，我是另一个被你救出来的Odoo开发者。谢谢！

【解决方案3】：

只有部分解决方案：我可以让它在 IE 上工作的唯一方法是将每个 div 包装在它自己的表格中，并在表格上设置 page-break-inside 以避免。

【讨论】：

@easwee：谢谢。否决票发生在 inquisitive_web_developer 悬赏问题的同时。我的猜测是他/她不喜欢它。 ;)
漂亮！你是冠军；我一直在寻找一种在 wkhtmltopdf 中执行此操作的方法，它不能正确支持 page-break-inside: avoid;。最后我有一个不错的解决方法。
在 0.11 版的 wkhtmltopdf 中测试了 page-break-inside 并且可以正常工作。
用 wkhtmltopdf 0.12.2.1 测试。不再需要表格内的 div，只需将 page-break-inside: 放在 div 选择器上即可。有效！

【解决方案4】：

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

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

我可以给您的建议是，要在 FF 中完成此功能，请将您不想在 DIV（或任何容器）中破坏的内容包装起来，溢出：auto（注意不要引起奇怪通过将容器的大小调整得太小来显示滚动条）。

遗憾的是，FF 是我唯一能做到这一点的浏览器，而我更担心的是 webkit。

【讨论】：

【解决方案5】：

在我的例子中，我设法通过将我选择的 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 之一。

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

显然它也不适用于inline-blocks

【解决方案7】：

我有同样的问题，但还没有解决方案。 page-break-inside 不适用于浏览器，但 Opera。另一种方法可能是在 div 的所有子元素上使用 page-break-after: Avoid; 以保持在一起......但在我的测试中，avoid-Attribute 不起作用，例如。在火狐...

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

【讨论】：

这应该适用于 Webkit。但是，您可能需要使用 page-break-after: always; 放置一些额外的用于打印样式的 div：在 ~ 半打你的常规 div 之后。

【解决方案8】：

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

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

我能够通过使用display: inline-block 识别容器元素并添加：

来恢复正常的page-break-inside: avoid; 功能

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

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

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

【讨论】：

【解决方案9】：

我也必须处理 wkhtmltopdf。

我使用 Bootstrap 3.3.7 作为框架，需要避免在 .row 元素上分页。

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

.myContainer {
    display: grid;
    page-break-inside: avoid;
}

无需包装在@media print

【讨论】：

这就是答案！但是，使用 @media print 会更好，但这取决于要求。

【解决方案10】：

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

【讨论】：

【解决方案11】：

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

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

【讨论】：

【解决方案12】：

我在使用 Bootstrap 时遇到了这个问题，并且每行中有多个列。

我试图将page-break-inside: avoid; 或break-inside: avoid; 赋予col-md-6 div 元素。那是行不通的。

我从DOK 上面给出的答案中得到了提示，浮动元素不适用于page-break-inside: avoid;。

相反，我不得不将page-break-inside: avoid; 或break-inside: avoid; 赋予<div class="row"> 元素。我的打印页面中有多个行。

也就是说，每个行只有2列。而且它们总是水平放置，不会换行。

在另一个示例情况下，如果您希望每行有 4 列，则使用col-md-3。

【讨论】：