回答(12)

2 years ago

我在包括Chrome在内的所有主流浏览器中都成功使用了以下方法：

Paginated HTML

div.page

{

page-break-after: always;

page-break-inside: avoid;

}

这是一个简化的例子 . 在实际代码中，每个页面div包含更多元素 .

2 years ago

实际上，选择接受的答案中缺少一个细节(来自Phil Ross)....

它 DOES 在Chrome中工作，解决方案真的是 silly !!

必须将父控件和要控制分页的元素声明为：

position: relative

这适用于：

page-break-before

page-break-after

page-break-inside

但是，在Safari中控制分页内部功能不起作用(至少在5.1.7中)

我希望这有帮助！！！

PS：下面的问题提出了这样一个事实，即最近版本的Chrome不再尊重这一点，即使是位置：相对;特技 . 但是，他们似乎确实尊重：

-webkit-region-break-inside: avoid;

所以我想我们现在必须加上......

希望这可以帮助！

2 years ago

我只想在此注意，Chrome也忽略了已经浮动的div中的page-break- * css设置 .

我怀疑在css规范的某个地方有一个合理的理由，但我想有一天它可能会帮助某人;-)

另一个注意事项：如果前一个块元素没有明确的高度，IE7无法确认分页设置：

2 years ago

我自己也遇到了这个问题 - 我的页面在每个浏览器中都有效，但是Chrome - 并且能够将其分离到表格单元格中的分页符元素 . (CMS中旧的，继承的模板 . )

显然Chrome不支持表格单元格中的page-break-before或page-break-after属性，因此Phil的示例的这个修改版本将第二个和第三个 Headers 放在同一页面上：

Paginated HTML

div.page

{

page-break-after: always;

page-break-inside: avoid;

}

This is Page 2 This is, sadly, still Page 2

2 years ago

我遇到了类似的问题，但我最终找到了解决方案 . 我已经 overflow-x: hidden; 应用于标签，所以无论我在DOM下面做了什么，它都不会允许分页 . 通过恢复到 overflow-x: visible; 它工作正常 .

希望这有助于那里的人 .

2 years ago

小心CSS： display:inline-block 打印时 .

如果我的表位于具有样式 display:inline-block 的div内，那么转到下一页的CCS属性都不适用于Chrome和Firefox

例如，以下内容不起作用：

但是以下工作：

2 years ago

我之前在chrome上遇到过这个问题，原因是有一个div将min-height设置为一个值 . 解决方案是在打印时重置最小高度，如下所示：

@media print {

.wizard-content{

min-height: 0;

}

}

2 years ago

2016年更新：

好吧，当我有这个问题时，我遇到了这个问题

overflow:hidden

在我的div .

我做完之后

@media print {

div {

overflow:initial !important

}

}

一切都变得很好，完美

2 years ago

如果您使用带有Bootstrap Css的Chrome，那么控制网格布局的类(例如col-xs-12等)使用“float：left”，正如其他人所指出的那样，它会破坏分页符 . 从页面中删除这些以进行打印 . 它对我有用 . (在Chrome版本= 49.0.2623.87)

2 years ago

有这个问题 . 如此长时间的传递...没有页面的侧面区域，它正常，但是当字段出现时，页面和“分页空间”将缩放 . 因此，对于正常字段，在文档中，它显示不正确 . 我用套装修好了

width:100%

并使用

div.page

{

page-break-before: always;

page-break-inside: avoid;

}

在第一行使用它 .

2 years ago

据我所知，使用谷歌浏览器在表格中获得正确分页符的唯一方法是将其提供给元素

属性 display: inline-table (或显示：内联块，但在其他非表格的情况下它更适合) . 也应该使用由@Phil Ross编写的属性"page-break-after: always; page-break-inside: avoid;"

...

2 years ago

当我使用填充时，它对我有用：