CSS 打印：避免页面之间的 DIV 对半切开？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/907680/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Printing: Avoiding cut-in-half DIVs between pages?
提问by joeylange
I'm writing a plug-in for a piece of software that takes a big collection of items and pops them into HTML in a WebView in Cocoa (which uses WebKit as its renderer, so basically you can assume this HTML file is being opened in Safari).
我正在为一个软件编写一个插件，该软件需要大量项目并将它们弹出到 Cocoa 中的 WebView 中的 HTML 中（它使用 WebKit 作为它的渲染器，所以基本上你可以假设这个 HTML 文件是在苹果浏览器）。
The DIVs it makes are of dynamic height, but they don't vary too much. They're usually around 200px. Anyway, with around six-hundred of these items per document, I'm having a really rough time getting it to print. Unless I get lucky, there's an entry chopped in half at the bottom and top of every page, and that makes actually using printouts very difficult.
它制作的 DIV 具有动态高度，但它们变化不大。它们通常在 200px 左右。无论如何，每个文档大约有六百个这样的项目，我很难把它打印出来。除非我很幸运，否则每页的底部和顶部都有一个条目被切成两半，这使得实际使用打印输出变得非常困难。
I've tried page-break-before, page-break-after, page-break-inside, and combinations of the three to no avail. I think it might be WebKit not properly rendering the instructions, or maybe it's my lack of understanding of how to use them. At any rate, I need help. How can I prevent the cutting-in-half of my DIVs when printing?
我试过分页前、后分页、内分页以及三者的组合都无济于事。我认为可能是 WebKit 没有正确呈现指令，或者可能是我对如何使用它们缺乏了解。无论如何，我需要帮助。打印时如何防止 DIV 被切割成两半？
回答by Dmitri Farkov
This should work:
这应该有效：
@media print
{
div{
page-break-inside: avoid;
}
}
Please note current browser support (12-03-2014):
- Chrome - 1.0+
- Firefox (Gecko) - 19.0+
- Internet Explorer - 8.0+
- Opera - 7.0+
- Safari - 1.3+ (312)
- 铬 - 1.0+
- 火狐（壁虎） - 19.0+
- Internet Explorer - 8.0+
- 歌剧 - 7.0+
- Safari - 1.3+ (312)
回答by NotMe
Only a partial solution: The only way I could get this to work for IE was to wrap each div in it's own table and set the page-break-inside on the table to avoid.
只有部分解决方案：我能让它为 IE 工作的唯一方法是将每个 div 包装在它自己的表中，并在表上设置分页符以避免。
回答by Bonjowi
page-break-inside: avoid;gave me trouble using wkhtmltopdf.
page-break-inside: avoid;使用 wkhtmltopdf 给我带来了麻烦。
To avoid breaks in the text add display: table;to the CSS of the text-containing div.
为避免文本中断，请添加display: table;到包含文本的 div 的 CSS 中。
I hope this works for you too. Thanks JohnS.
我希望这也适用于你。谢谢约翰。
回答by Bob Monteverde
page-break-inside: avoid; definitely does not work in webkit, in fact has been a known issue for 5+ years now https://bugs.webkit.org/show_bug.cgi?id=5097
page-break-inside：避免；绝对不能在 webkit 中工作，实际上已经是 5 年以上的已知问题https://bugs.webkit.org/show_bug.cgi?id=5097
As far as my research has gone, there is no known method to accomplish this (I am working on figuring out my own hack)
就我的研究而言，没有已知的方法可以实现这一点（我正在努力找出自己的 hack）
The advice I can give you is, to accomplish this functionality in FF, wrap the content that you don;t want to break ever inside a DIV (or any container) with overflow: auto (just be careful not to cause weird scroll bars to show up by sizing the container too small).
我可以给您的建议是，要在 FF 中完成此功能，请将您不想在 DIV（或任何容器）中破坏的内容使用 overflow: auto（注意不要导致奇怪的滚动条通过将容器调整得太小来显示）。
Sadly, FF is the only browser I managed to accomplish this in, and webkit is the one I am more worried about.
可悲的是，FF 是我唯一能够做到这一点的浏览器，而 webkit 是我更担心的浏览器。
回答by DOK
The possible values for page-break-after are: auto, always, avoid, left, right
page-break-after 的可能值是： auto, always, avoid, left, right
I believe that you can't use thie page-break-after property on absolutely positioned elements.
我相信你不能在绝对定位的元素上使用 thie page-break-after 属性。
回答by Bjoern
I have the same problem bu no solution yet. page-break-insidedoes not work on browsers but Opera. An alternative might be to use page-break-after: avoid;on all child elements of the div to keep togehter ... but in my tests, the avoid-Attribute does not work eg. in Firefox ...
我有同样的问题，但还没有解决方案。page-break-inside不适用于浏览器，但适用于 Opera。另一种可能是使用page-break-after: avoid; 在 div 的所有子元素上保持在一起......但在我的测试中，避免属性不起作用，例如。在火狐...
What works in all ppular browsers are forced page breaks using eg. page-break-after: always
在所有 ppular 浏览器中都有效的是使用例如强制分页符。分页后：总是
回答by Eric D.
One pitfall I ran into was a parent element having the 'overflow' attribute set to 'auto'. This negates child div elements with the page-break-inside attribute in the print version. Otherwise, page-break-inside: avoidworks fine on Chrome for me.
我遇到的一个陷阱是父元素的 'overflow' 属性设置为 'auto'。这在打印版本中使用 page-break-inside 属性否定子 div 元素。否则，page-break-inside: avoid对我来说在 Chrome 上工作正常。
回答by Waltur Buerk
In my case I managed to fix the page break difficulties in webkit by setting my selected divs to page-break-inside:avoid, and also setting all elements to display:inline. So like this:
在我的例子中，我通过将我选择的 div 设置为 page-break-inside:avoid，并将所有元素设置为 display:inline，设法解决了 webkit 中的分页问题。所以像这样：
@media print{
* {
display:inline;
}
script, style {
display:none;
}
div {
page-break-inside:avoid;
}
}
It seems like page-break-properties can only be applied to inline elements (in webkit). I tried to only apply display:inline to the particular elements I needed, but this didn't work. The only thing that worked was applying inline to all elements. I guess it's one of the large container div' that's messing things up.
似乎 page-break-properties 只能应用于内联元素（在 webkit 中）。我尝试只将 display:inline 应用于我需要的特定元素，但这不起作用。唯一有效的是将内联应用于所有元素。我想这是把事情搞砸的大型容器 div 之一。
Maybe someone could expand on this.
也许有人可以对此进行扩展。
回答by Naun Lemos
@media print{
/* use your css selector */
div{
page-break-inside: avoid;
}
}
For all new browser this solution works. See caniuse.com/#search=page-break-inside
对于所有新浏览器，此解决方案都有效。见 caniuse.com/#search=page-break-inside
