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

138

我正在编写一个软件的插件，它需要大量项目集合并将它们弹出到Cocoa WebView中的HTML中（它使用WebKit作为它的渲染器，所以基本上可以假设这个HTML文件正在在Safari中打开）。CSS打印：避免页面之间的半切DIV？

它制作的DIV具有动态高度，但它们变化不大。他们通常在200px左右。无论如何，每个文档中大约有六百个这样的项目，我要花很长时间才能打印出来。除非我运气好，否则每页的底部和顶部都会有一个入口被切碎，这使得实际使用打印输出非常困难。

我已经尝试过页面中断，页面中断，页面中断，以及三者的组合，但无济于事。我认为这可能是WebKit不能正确呈现说明，也可能是我对如何使用它们缺乏理解。无论如何，我需要帮助。打印时如何防止我的DIV的一半？

来源

2009-05-25 joeylange

提供有关您遇到的问题的示例文档，也许我们可以提供帮助！ – 2009-05-25 18:49:40

我回答了一个非常类似的问题，关于避免在这里一半div divs：http://stackoverflow.com/a/14348953/1026459 – 2013-01-15 23:38:25

228

这应该工作：

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

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

铬 - 1.0+
火狐（壁虎） - 19.0+
的Internet Explorer - 8.0+
Opera - 7.0+
Safari - 1 .3+（312）

来源

2009-05-25 18:52:46

它**应**工作。但事实并非如此。浏览器支持请参见http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules。 – Greg 2012-06-26 09:24:27

在Safari 6中工作:)现在正在开发者预览中_ – 2012-07-21 17:14:11

的分页，之后可能的值是：auto, always, avoid, left, right

我相信你无法使用thie分页-后绝对定位的元素属性。

来源

2009-05-25 18:55:04 DOK

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

什么适用于所有ppular浏览器是强制分页使用例如。 分页-后：总是

来源

2010-01-27 10:45:27 Bjoern

只能解决部分问题：我能得到这个对IE浏览器的唯一办法是包装每个格在它自己的表，并设置了分页，里面有关于表避免。

来源

2010-09-01 19:48:38 NotMe

page-break-inside：avoid;绝对不能在webkit中工作，实际上已经是一个已知的问题5年多了现在https://bugs.webkit.org/show_bug.cgi?id=5097

就我的研究已经没有已知的方法来实现这一点（我正在努力找出我自己的黑客）

我可以给你的建议是，在FF中完成这个功能，包装你不想做的内容;不想在带有溢出的DIV（或任何容器）内破坏：auto（注意不要导致奇怪的滚动条显示通过调整容器太小）。

不幸的是，FF是我设法完成的唯一浏览器，webkit是我更担心的一个。

来源

2011-06-01 21:15:33

在我的情况下，我设法通过将我选择的div设置为page-break-inside：来避免并设置所有显示内容：inline，从而解决了webkit中的分页符难题。所以像这样：

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

}

看起来像page-break-properties只能应用于内嵌元素（在webkit中）。我试图只应用display：内联到我需要的特定元素，但这不起作用。唯一有效的工作是内联应用于所有元素。我想这是大型集装箱公司的事情之一。

也许有人可以在此扩大。

来源

2015-03-20 15:57:41

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

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

我希望这也适用于你。谢谢JohnS。

来源

2015-04-21 13:08:01 Bonjowi

我遇到的一个陷阱是一个父元素'overflow'属性设置为'auto'。这会在打印版本中使用page-break-inside属性取消子div元素。否则，page-break-inside: avoid适合我在Chrome上正常工作。

来源

2015-05-19 16:50:48

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

回答

相关问题