关于html：page-break-inside在Chrome中不起作用？


page-break-inside doesn't work in Chrome?

我在页面上有一堆段落：

1
2
3
4
5
6
7
8
9
<p>
 ...
</p>
<p>
 ...
</p>
<p>
 ...
</p>

这些段落的CSS规则是：

1
2
3
4
p {
    margin: 20px 0;
    page-break-inside: avoid;
}

现场演示：http://jsfiddle.net/KE9je/2/show/

如果我正确理解page-break-inside属性，则上述内容应确保在两页之间不分割任何段落。 (一个段落显示在"当前"页面上，或者如果段落不完全适合，则会移至下一页。)

这似乎在Chrome中不起作用。 打开演示，右键单击页面，选择"打印..."。 您将看到打印预览-第五段分为第1页和第2页。

我究竟做错了什么？ 如何在Chrome浏览器中执行此操作？

相关讨论

实际上，它确实可以在Chrome中使用，而且解决方案真的很愚蠢！！

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

1
position: relative;

查看这个小提琴(或全屏显示)

这适用于：

1
2
3
page-break-before
page-break-after
page-break-inside

但是，在Safari中控制page-break-inside无效(至少在5.1.7中)

我希望这有帮助！！！

相关讨论

这对我来说最有效：

1
2
3
4
5
.no-page-break {
   display: inline-block;
   width: 100%;
   page-break-inside: avoid;
}

如果需要，还可以指定height。

相关讨论

我知道这是一个老问题，但是自从最初回答以来，Chrome已更改，这可能会有所帮助。

看起来page-break-inside:avoid在Chrome中可以根据元素的高度进行工作，因此，如果在div中浮动一堆元素，则page-break-inside:avoid将不起作用。

可以通过明确定义不想分解的元素的高度来解决此问题。 jQuery示例：

1
$('#page_break_inside_avoid_element').height($('#page_break_inside_avoid_element').height());
相关讨论

根据SitePoint所述，此处不支持Chrome，仅支持Opera(和IE 8越野车)...

http://reference.sitepoint.com/css/page-break-inside

其他参考：

http://www.webdevout.net

[Page-break-inside: avoid;] Doesn't work... from css

堆栈溢出线程：

跨浏览器对`page-break-inside：避免;`的支持

" page-break-inside：避免"-不起作用

Google Chrome打印分页符

哪些浏览器支持使用CSS和page-break-inside元素进行分页操作？

Google Chrome论坛：

http://www.google.com/support/forum

我不会发布W3Schools链接(由于普遍的不可靠性)，但无论如何，它们都声明Opera仅支持该链接。

相关讨论

对于引导程序，请注意，即使您手动更改position属性，在container或row或其他类的引导程序下，page-break-inside或其他也可能无法(高度)工作。当我排除container和row时，它就像一个魅力！

对我有用的(在FFox和Chrome中都是这样)

1
2
3
4
5
6
7
8
9
10
11
.container {
  column-gap: .4em;
  columns: 3;
  padding: .4em;
}

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

就是这样；我不需要position。

我刚刚在IE9，Chrome 14和Firefox 7中使用较大的段落进行了测试，看起来只有IE9可以正常工作。您可能不得不求助于手动添加分页符的位置

1
page-break-after:always

当然，如果您提前知道内容长度，那么这对您没有任何好处。

相关讨论

这是我在编写CSS打印时解决此问题的方法。

例如，您将一些图片放在这样的HTML文件中：

1
2
3
4
5
6
7
8
    <figure>
        <img src="img01.jpg" alt="Front View">
        <figcaption>Front View</figcaption>
        </figure>
    <figure>
        <img src="img02.jpg" alt="Rear View">
        <figcaption>Rear View</figcaption>
    </figure>

然后像这样写css：

1
2
3
.bottom figure{
  page-break-inside: avoid;
}

有时，它无法按您预期的那样工作，因为大多数元素的默认显示值是block或inline，而不是"分页友好"。我通常会这样更改：

1
2
3
.bottom{
    display: contents;
}

这样做的目的是使容器消失，使子元素的子元素在DOM中更上一层楼。

关于您的问题，建议您查看该段落容器的显示模式，以查看其是否设置为阻止。如果是这样，请将其更改为内容，然后重试。

希望对您有所帮助。

相关讨论

检查父级(或顶级容器)显示是否为flex；删除并重试；
它适用于chrome71

我已经为此进行了一段时间的努力，并且按照其他答案中的建议进行操作，我必须确保该元素和所有父元素都具有样式Display: block;。

相关讨论

它对我有用，像这样：

1
2
.print{position: absolute;}
.print p{page-break-inside: avoid}