CSS 打印：避免页面之间的 DIV 切成两半？

Question

我正在为一个软件编写一个插件，它需要大量的项目集合并将它们弹出到 Cocoa 中 WebView 中的 HTML 中（它使用 WebKit 作为其渲染器，所以基本上你可以假设这个 HTML 文件是在苹果浏览器）。

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

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

Answer 1

使用 break-inside 应该可以工作：

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

它适用于 < a href="https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside" rel="noreferrer">所有主流浏览器：

• Chrome 50+
• Edge 12+
• Firefox 65 +
• Opera 37+
• Safari 10+

使用 page-break-inside:void; 也应该可以工作，但已经已被 break-inside:void 完全弃用。

Answer 2

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

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

我希望这也适合你。 谢谢约翰。

编辑：建议将其添加到 media 块中，以免破坏现有样式。 IE

@media print {
  div.my-div {
    display: table
  }
}

Answer 3

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

Answer 4

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

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

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

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

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

希望这可以帮助那些抱怨“内部分页符不起作用”。

Answer 5

我也必须处理 wkhtmltopdf 。

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

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

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

无需换行@media print

Answer 6

内部分页：避免； 绝对不能在 webkit 中工作，事实上，这个已知问题已经存在 5 年多了 https: //bugs.webkit.org/show_bug.cgi?id=5097

就我的研究而言，没有已知的方法可以完成此任务（我正在研究自己的技巧）

我可以提供的建议给你的是，要在 FF 中完成此功能，请将你不想破坏的内容包装在 DIV （或任何容器）内，并使用 Overflow: auto （只是要小心，不要因调整大小而导致出现奇怪的滚动条）容器太小）。

遗憾的是，FF 是我唯一能够实现这一目标的浏览器，而 webkit 是我更担心的浏览器。

Answer 7

就我而言，我通过将选定的 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 应用于我需要的特定元素，但这不起作用。 唯一有效的是将内联应用于所有元素。 我猜这是一个大型容器分区，把事情搞砸了。

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

Answer 8

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

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

Answer 9

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

在所有流行的浏览器中有效的是使用例如强制分页符。 分页后：始终

Answer 10

我遇到的一个陷阱是父元素的“overflow”属性设置为“auto”。 这会在打印版本中否定具有 page-break-inside 属性的子 div 元素。 否则，page-break-inside:void 对我来说在 Chrome 上工作得很好。

Answer 11

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

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

Answer 12

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

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

我从 DOK 上面给出的答案中得到了暗示，浮动元素不能很好地与 page-break- 配合使用里面：避免；。

相反，我必须将 page-break-inside:void; 或 break-inside:avoid; 赋予

元素。 我的打印页面中有多个行。

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

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