CSS Google Chrome 打印分页符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1630819/
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
Google Chrome Printing Page Breaks
提问by Mike Valstar
I'm trying to get google chrome to do page breaks.
我正在尝试让谷歌浏览器进行分页。
I've been told via a bunch of websites that page-break-after: always;is valid in chrome but I can not seem to get it to work even with a very simple example. is there any way to force a page break when printing in chrome?
我通过一堆page-break-after: always;在 chrome 中有效的网站被告知，但即使使用一个非常简单的例子，我似乎也无法让它工作。在 chrome 中打印时有什么方法可以强制分页吗？
回答by Phil Ross
I've used the following approach successfully in all major browsers including Chrome:
我已经在包括 Chrome 在内的所有主要浏览器中成功使用了以下方法：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is Page 3</h1>
</div>
</body>
</html>
This is a simplified example. In the real code, each page div contains many more elements.
这是一个简化的例子。在实际代码中，每个页面 div 包含更多元素。
回答by Peter
Actually one detail is missing from the answer that is selected as accepted (from Phil Ross)....
实际上，被选为接受的答案中缺少一个细节（来自菲尔罗斯）......
it DOESwork in Chrome, and the solution is really silly!!
它确实适用于 Chrome，解决方案真的很愚蠢！！
Both the parent and the element onto which you want to control page-breaking must be declared as:
要控制分页的父元素和元素都必须声明为：
position: relative
check out this fiddle: http://jsfiddle.net/petersphilo/QCvA5/5/show/
看看这个小提琴：http: //jsfiddle.net/petersphilo/QCvA5/5/show/
This is true for:
这适用于：
page-break-before
page-break-after
page-break-inside
However, controlling page-break-inside in Safari does not work (in 5.1.7, at least)
但是，在 Safari 中控制 page-break-inside 不起作用（至少在 5.1.7 中）
i hope this helps!!!
我希望这有帮助！！！
PS: The question below brought up that fact that recent versions of Chrome no longer respect this, even with the position: relative; trick. However, they do seem to respect:
PS：下面的问题提出了一个事实，即最新版本的 Chrome 不再尊重这一点，即使位置是：relative; 诡计。然而，他们似乎确实尊重：
-webkit-region-break-inside: avoid;
see this fiddle: http://jsfiddle.net/petersphilo/QCvA5/23/show
看到这个小提琴：http: //jsfiddle.net/petersphilo/QCvA5/23/show
so i guess we have to add that now...
所以我想我们现在必须添加...
Hope this helps!
希望这可以帮助！
回答by fordareh
I just wanted to note here that Chrome also ignores page-break-* css settings in divs that have been floated.
我只是想在这里指出，Chrome 还会忽略已浮动的 div 中的 page-break-* css 设置。
I suspect there is a sound justification for this somewhere in the css spec, but I figured noting it might help someone someday ;-)
我怀疑在 css 规范的某处有一个合理的理由，但我想注意到它可能有一天会帮助某人;-)
Just another note: IE7 can't acknowledge page break settings without an explicit height on the previous block element:
另一个注意事项：IE7 无法确认前一个块元素上没有明确高度的分页设置：
回答by davidbehan
I had an issue similar to this but I found the solution eventually. I had overflow-x: hidden;applied to the <html> tag so no matter what I did below in the DOM, it would never allow page breaks. By reverting to overflow-x: visible;it worked fine.
我有一个类似的问题，但我最终找到了解决方案。我有溢出-x：隐藏；应用于 <html> 标签，所以无论我在 DOM 下面做什么，它都不会允许分页。通过恢复到溢出-x：可见；它工作正常。
Hopefully this helps somebody out there.
希望这可以帮助那里的人。
回答by Nate Cook
I'm having this problem myself - my page breaks work in every browser but Chrome - and was able to isolate it down to the page-break-after element being inside a table cell. (Old, inherited templates in the CMS.)
我自己也遇到了这个问题 - 我的分页符在除 Chrome 之外的每个浏览器中都有效 - 并且能够将其隔离到表格单元格内的分页符后元素。（CMS 中旧的、继承的模板。）
Apparently Chrome doesn't honor the page-break-before or page-break-after properties inside table cells, so this modified version of Phil's example puts the second and third headline on the same page:
显然 Chrome 不支持表格单元格中的 page-break-before 或 page-break-after 属性，所以这个 Phil 示例的修改版本将第二个和第三个标题放在同一页面上：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<table>
<tr>
<td>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is, sadly, still Page 2</h1>
</div>
</td>
</tr>
</table>
</body>
</html>
Chrome's implementation is (dubiously) allowed given the CSS specification - you can see more here: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=en
鉴于 CSS 规范，Chrome 的实现（可疑）是允许的 - 您可以在此处查看更多信息：http: //www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789& hl=en
回答by Gudradain
Beware of CSS : display:inline-blockwhen printing.
当心 CSS :display:inline-block打印时。
None of the CCS property to go to next page would work for me in Chrome and Firefox if my table was inside a div with the style display:inline-block
如果我的表位于具有样式的 div 内，则转到下一页的 CCS 属性都不适用于 Chrome 和 Firefox display:inline-block
For example, the following doesn't work :
例如，以下不起作用：
<div style='display:inline-block'>
<table style='page-break-before:always'>
...
</table>
<table style='page-break-before:always'>
...
</table>
</div>
But the following work :
但以下工作：
<div>
<table style='page-break-before:always'>
...
</table>
<table style='page-break-before:always'>
...
</table>
</div>
回答by Hamdy Ahmed
I faced this issue on chrome before and the cause for it is that there was a div has min-height set to a value. The solution was to reset min-height while printing as follows:
我之前在 chrome 上遇到过这个问题，原因是有一个 div 将 min-height 设置为一个值。解决方案是在打印时重置 min-height 如下：
@media print {
.wizard-content{
min-height: 0;
}
}
回答by x0 z1
2016 update:
2016年更新：
Well, I got this problem, when I had
好吧，我遇到了这个问题，当我有
overflow:hidden
on my div.
在我的 div 上。
After I made
我做了之后
@media print {
div {
overflow:initial !important
}
}
everything became just fine and perfect
一切都变得恰到好处
回答by Astra Bear
If you are using Chrome with Bootstrap Css the classes that control the grid layout eg col-xs-12 etc use "float: left" which, as others have pointed out, wrecks the page breaks. Remove these from your page for printing. It worked for me. (On Chrome version = 49.0.2623.87)
如果您将 Chrome 与 Bootstrap Css 一起使用，则控制网格布局的类（例如 col-xs-12 等）使用“float: left”，正如其他人指出的那样，它会破坏分页符。从您的页面中删除这些以进行打印。它对我有用。（Chrome 版本 = 49.0.2623.87）
回答by Codekraft
As far as I know the only way to get the correct page breaks in tables with Google Chrome is giving it to the element <tr>the property display: inline-table(or display: inline-block but it fits better in other cases that are not tables). Also should be used the properties "page-break-after: always; page-break-inside: avoid;" as written by @Phil Ross
据我所知，使用 Google Chrome 在表格中获得正确分页符的唯一方法是将其赋予元素<tr>属性display: inline-table（或 display: inline-block 但它更适合其他非表格的情况）。还应该使用属性“page-break-after: always; page-break-inside: avoid;” 正如@Phil Ross 所写
<table>
<tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;">
<td></td>
<td></td>
...
</tr>
</table>
