Google Chrome浏览器打印分页符
我试图让谷歌浏览器做分页。
我已经通过一堆网站告诉他们page-break-after: always; 是有效的铬，但我似乎无法让它工作，即使是一个非常简单的例子。 在Chrome中打印时，有没有办法强制分页？
我已经在所有主stream浏览器（包括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>
这是一个简单的例子。 在真实的代码中，每个页面div都包含更多的元素。
其实一个细节是从select被接受的答案（从菲尔罗斯）错过….
它在Chrome中工作，解决scheme真的很傻 ！
父级和要控制分页的元素都必须声明为：
position: relative
看看这个小提琴： http : //jsfiddle.net/petersphilo/QCvA5/5/show/
这是对的：
page-break-before page-break-after page-break-inside
但是，在Safari中控制分页符不起作用（至less在5.1.7中）
我希望这有帮助！！！
PS：下面的问题提出了一个事实，即最近版本的Chrome不再尊重这一点，即使是相对的位置： 招。 但是，他们似乎确实尊重：
-webkit-region-break-inside: avoid;
看这个小提琴： http : //jsfiddle.net/petersphilo/QCvA5/23/show
所以我想我们现在必须添加…
希望这可以帮助！
我自己也遇到了这个问题 – 我的页面在除Chrome以外的每个浏览器中都能正常工作，并能够将其隔离到表格单元格内的页面中断元素。 （CMS中旧的，inheritance的模板）
显然，Chrome并没有遵守表格单元格内的页面中断前或页面中断后的属性，所以这个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>
根据CSS规范，Chrome的实现（可疑地）是允许的 – 您可以在这里看到更多： http : //www.google.com/support/forum/p/Chrome/thread?tid= 32f9d9629d6f6789& hl= zh-CN
我只是想在这里注意到，Chrome也忽略了已经浮动的div中的page-break- * css设置。
我怀疑在css规范的某个地方有一个合理的理由，但是我觉得有一天它可能会帮助别人;-)
只是另一个注意：IE7不能确认分页设置没有明确的高度在前面的块元素：
我有一个类似的问题，但我最终find了解决scheme。 我有overflow-x：hidden; 应用于<html>标签，所以不pipe我在DOM中做了什么，它绝不允许分页符。 通过恢复到溢出x：可见; 它工作正常。
希望这可以帮助那里的人。
谨防CSS：在打印时display:inline-block 。
如果我的表格在带有样式display:inline-block的div内，那么Chrome和Firefox的CCS属性都无法在我的下一页工作display:inline-block
例如，以下不起作用：
<div style='display:inline-block'> <table style='page-break-before:always'> ... </table> <table style='page-break-before:always'> ... </table> </div>
但以下工作：
<div> <table style='page-break-before:always'> ... </table> <table style='page-break-before:always'> ... </table> </div>
我之前在Chrome上面对过这个问题，其原因是有一个div将min-height设置为一个值。 解决方法是在打印时重置最小高度，如下所示：
@media print { .wizard-content{ min-height: 0; } }
2016更新：
那么，我有这个问题，
overflow:hidden
在我的分区。
我做完之后
@media print { div { overflow:initial !important } }
一切都变得美好而完美
看来，这是相对最近（2014年2月）讨论（在一个旧的2005错误票）在webkit错误跟踪器
如果你使用Chrome和Bootstrap Css，控制网格布局的类如col-xs-12等使用“float：left”，正如其他人指出的那样，破坏了分页符。 从您的页面中删除这些打印。 它为我工作。 （在Chrome版本= 49.0.2623.87）
有这个问题。 很长一段时间通过…没有页面的侧面是正常的，但是当字段出现时，页面和“分页符空间”将会缩放。 所以，在一个正常的领域，在一个文件，它显示不正确。 我用set来修复它
width:100%
并使用
div.page { page-break-before: always; page-break-inside: avoid; }
在第一行使用它。
据我所知，唯一能让Google Chrome浏览器获得正确分页符的方法就是将元素<tr>赋予属性display：inline-table （或display：inline-block），但在其他情况下不是表格）。 也应该使用属性“页面中断：总是;页面中断内部：避免;” 如@Phil Ross写的
<table> <tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;"> <td></td> <td></td> ... </tr> </table>
当我使用填充时，它正在为我工作：
<div style="padding-top :200px;page-break-inside:avoid;"> <div>My content</div> </div>
