谷歌 Chrome 打印页面断裂

我试图让谷歌铬做分页。

我已经通过一群网站告诉，page-break-after: always;是有效的在铬，但我似乎不能得到它的工作，即使用一个非常简单的例子。在打印铬合金时，有没有办法强制折页？

160081 次浏览
小开
最佳答案

我在所有主流浏览器中都成功地使用了以下方法，包括 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 包含更多的元素。

小开

我自己也有这个问题——除了 Chrome 之外，我的 page break 在每个浏览器中都能正常工作——并且能够将它分离到一个表格单元格中的 page-break-after 元素中。(CMS 中的旧的、继承的模板。)

显然 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=en

小开

我只是想在这里指出，Chrome 也忽略了 div 中已经浮动的 page-break-* css 设置。

我怀疑在 css 规范中的某个地方有一个合理的解释，但是我想注意到它可能有一天会对某些人有帮助; -)

还有一点需要注意: IE7不能在前一个 block 元素没有显式高度的情况下确认分页设置:

Http://social.msdn.microsoft.com/forums/en-us/iewebdevelopment/thread/fe523ec6-2f01-41df-a31d-9ba93f21787b/

小开

我也遇到过类似的问题，但我最终找到了解决办法。我将 溢出 -x: 隐藏;应用到 < html > 标记，因此无论我在 DOM 中做什么，它都不会允许分页。通过恢复到 溢出-x: 可见;，它工作得很好。

希望这能帮到别人。

小开

实际上，在被选为接受的答案中缺少了一个细节(来自菲尔 · 罗斯) ... ..。

它的 是的工作在 Chrome，解决方案是真正的 真傻! ！

要控制分页的父元素和元素都必须声明为:

position: relative

check out this fiddle: http://jsfiddle.net/petersphilo/QCvA5/5/show/

This is true for:

page-break-before
page-break-after
page-break-inside

然而，在 Safari 中控制页面破坏内部不起作用(至少在5.1.7中)

我希望这有帮助! ! ！

PS: 下面的问题提出了这样一个事实: 最近的 Chrome 版本不再尊重这一点，即使它的立场是: 相对的; 把戏。 然而，他们似乎尊重:

-webkit-region-break-inside: avoid;

看这把小提琴: Http://jsfiddle.net/petersphilo/qcva5/23/show

所以我想我们现在得加上..。

希望这个能帮上忙！

小开

有这个问题。这么长的时间过去了..。 如果没有页面的边栏，它的中断正常，但当字段出现时，页面和“页面中断空间”将缩放。因此，对于文档中的普通字段，它显示为不正确。 I fix it with set 

    width:100%

和使用

div.page
{
page-break-before: always;
page-break-inside: avoid;
}

用在第一线。

小开

打印时小心 CSS: display:inline-block。

如果我的表位于风格为 display:inline-block的 div 中，那么下一页的 CCS 属性在 Chrome 和 Firefox 中都不会起作用

例如，下面的方法不起作用:

<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;
}
}
小开

据我所知，使用 Google Chrome 获得表格中正确的分页符的唯一方法是将属性 显示: 内联表赋予元素 <tr>(或 display: inline-block，但它更适合其他非表格的情况)。还应该使用由@Phil Ross 编写的属性“ page-break-after: always; page-break-inside: void;”

<table>
<tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;">
<td></td>
<td></td>
...
</tr>
</table>
小开

2016 update:

我遇到这个问题的时候

overflow:hidden

在我的潜水器上。

在我

@media print {
div {
overflow:initial !important
}
}

everything became just fine and perfect

小开

如果你使用带有 Bootstrap CSS 的 Chrome 浏览器，那么控制网格布局的类(如 colxs-12等)使用“ float: left”，正如其他人指出的那样，它会破坏页面分割。从页面中删除这些内容以便打印。这招对我很管用。(Chrome 版本 = 49.0.2623.87)

小开

当我使用填充物的时候，它对我很有用，比如:

<div style="padding-top :200px;page-break-inside:avoid;">
<div>My content</div>
</div>
小开

现在已经是2021年了，这个话题是我们在搜索 Chrome 的确切问题时得到的第一个结果。我发现这是一个非常简单的解决方案，可以直接插入到你的浏览器中，不需要任何额外的努力，至少可以影响 Chrome 页面在一个:

<style>
@media print {
tr, th, td {
page-break-inside: avoid !important;
}
}
</style>

希望这能帮某人节省点时间。

小开

这给我带来了好处(2021 Chrome) :

@media print {
.page-break {
display: block;               // <== this can be missing sometimes
break-before: always;
page-break-before: always;
}
}
小开

我在 A4页面上打印16个标签横向旋转，每行4个标签，页面在最后一行被打破，只有12个标签在一页只有铬, 我在一个 div 上使用 display:inline-block;，然后用 float:right;代替它，它工作了！


提交答案