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

Question

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

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

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

score 413 · Accepted Answer

使用break-inside应该可以：

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

使用page-break-inside: avoid;instead 也应该有效，但已被break-inside: avoid.

score 26 · Accepted Answer

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

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

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

score 21 · Accepted Answer

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

score 7 · Accepted Answer

在我的情况下，我设法通过将我选择的 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 之一。

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

score 6 · Accepted Answer

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

就我的研究而言，没有已知的方法可以做到这一点（我正在研究我自己的黑客）

我可以给你的建议是，要在 FF 中完成此功能，请将您不想要的内容包装起来；不想在 DIV（或任何容器）中使用 overflow: auto 中断（只是注意不要导致奇怪的滚动条通过将容器尺寸过小来显示）。

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

score 5 · Accepted Answer

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

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

score 5 · Accepted Answer

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

在所有流行浏览器中起作用的是使用例如强制分页符。分页后：总是

score 5 · Accepted Answer

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

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

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

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

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

希望这可以帮助那些抱怨“page-break-inside 不起作用”的人。

score 5 · Accepted Answer

我也必须处理 wkhtmltopdf 。

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

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

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

无需包装@media print

score 3 · Accepted Answer

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

我试图给page-break-inside: avoid;或break-inside: avoid;给col-md-6div 元素。那行不通。

我从DOK上面给出的答案中得到了一个提示，即浮动元素不能很好地与page-break-inside: avoid;.

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

也就是说，每一行只有2 列。而且它们总是水平安装，不会换行。

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

12 回答 12