Question

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

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

我已尝试过分页前，分页后，分页内，以及三者的组合无济于事。我认为可能是WebKit没有正确呈现指令，或者可能是我对如何使用它们缺乏了解。无论如何，我需要帮助。打印时如何防止DIV的切割？

Answer 1

这应该有效：

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

请注意current browser support (12-03-2014)：

Chrome - 1.0 +
Firefox（Gecko） - 19.0 +
Internet Explorer - 8.0 +
Opera - 7.0 +
Safari - 1.3+（312）

Answer 2

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

Answer 3

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

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

我希望这也适合你。谢谢JohnS。

Answer 4

分页符可能的值为：auto, always, avoid, left, right

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

Answer 5

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

在所有ppular浏览器中有效的是使用例如强制分页符。 page-break-after：总是

Answer 6

page-break-inside：avoid;肯定在webkit中不起作用，实际上已经有5年以上的已知问题https://bugs.webkit.org/show_bug.cgi?id=5097

就我的研究而言，没有已知的方法来实现这一目标（我正在努力搞清楚自己的黑客攻击）

我可以给你的建议是，为了在FF中完成这个功能，包装你不喜欢的内容;想要在一个DIV（或任何容器）内部使用overflow：auto（只是注意不要引起怪异）通过调整容器的大小来显示滚动条太小）。

可悲的是，FF是我设法实现的唯一浏览器，而webkit是我更担心的。

Answer 7

我遇到的一个陷阱是将'overflow'属性设置为'auto'的父元素。这会使打印版本中具有page-break-inside属性的子div元素无效。否则，page-break-inside: avoid对我来说在Chrome上运行正常。

Answer 8

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; }
}

希望这可以帮助抱怨“分页入内无效”的人。

Answer 9

在我的情况下，我设法通过将我选择的div设置为page-break-inside来避免webkit中的分页难题：避免，并设置要显示的所有元素：inline。像这样：

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

}

似乎page-break-properties只能应用于内联元素（在webkit中）。我试图仅将display：inline应用于我需要的特定元素，但这不起作用。唯一有效的方法是将内联应用于所有元素。我想这是一个大容器div'，它搞乱了。

也许有人可以扩展这个。

Answer 10

我在使用 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。

Answer 11

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

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

Answer 12

我也不得不处理wkhtmltopdf。

我正在使用Bootstrap 3.3.7作为Framework，并且需要避免在.row元素上分页。

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

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

无需使用@media打印纸

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

12 个答案: