page-break-inside在Chrome中不起作用？

Question

我在页面上有一堆段落：

<p> ... </p>
<p> ... </p>
<p> ... </p>

这些段落的CSS规则是：

p {
    margin: 20px 0;
    page-break-inside: avoid;
}

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

如果我正确理解page-break-inside属性，上面应该确保两个页面之间没有分割段落。 （段落显示在“当前”页面上，或者如果它不完全适合，则会移到下一页。）

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

我做错了什么？如何在Chrome中完成此工作？

---

Answer 1

实际上， DOES 在Chrome中工作，解决方案确实愚蠢 !!

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

position: relative;

查看此fiddle（或fullscreen）

这适用于：

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

但是，在Safari中控制page-break-inside不起作用（至少在5.1.7中）

我希望这会有所帮助!!!

Answer 2

这最适合我：

.no-page-break {
   display: inline-block;
   width: 100%;
   page-break-inside: avoid;
}

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

Answer 3

根据SitePoint，此处不支持Chrome，只支持Opera（和IE 8错误）......

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

其他参考资料：

http://www.webdevout.net

http://www.reddit.com/r/css/comments/jdeim/pagebreakinside_avoid_doesnt_work/

Stack Overflow线程：

Cross-browser support of `page-break-inside: avoid;`

"page-break-inside: avoid "- does not work

Google Chrome Printing Page Breaks

Which browsers support page break manipulation using CSS and the page-break-inside element?

Google Chrome论坛：

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

我不会发布W3Schools链接（由于一般不可靠性），但他们也说它只支持Opera，无论它的值多少。

Answer 4

我知道这是一个老问题，但Chrome已经更改，因为它最初得到了解答，这可能有所帮助。

看起来page-break-inside:avoid基于元素的高度在Chrome中工作，所以如果你在div中浮动一堆元素，page-break-inside:avoid将不起作用。

通过明确定义您不想要分解的元素的高度，可以解决这个问题。 jQuery示例：

$('#page_break_inside_avoid_element').height($('#page_break_inside_avoid_element').height());

Answer 5

我刚刚在IE9，Chrome 14和Firefox 7中使用更大的段落进行了测试，看起来只有IE9按预期工作。您可能不得不使用

手动添加分页符

page-break-after:always

当然，如果你事先知道内容的长度，这对你有好处。

Answer 6

检查父容器显示是否不是内联块！！ 如果是这样，那么它永远不会起作用！我浪费了几个小时来弄清楚。

适用于 Chrome 87

Answer 7

我最近研究了 pdf 下载故事，其中包含表格格式的动态数据行，其中包括各种图表图像（技术使用 =>Angular + Spring + Thymleaf + Puppeteer） 处理分页符的一些关键点

1. 尝试使用ax.xaxis.set_major_locator(mdates.HourLocator(interval=2)) ax.xaxis.set_major_formatter(mdates.DateFormatter('%H:%M')) 块而不是 HTML 表格

2. 不要在您想要<div></div>的父容器上使用display: flex（在子元素中使用page-break-inside: avoid）

   .child1{ 向左飘浮; }

3.如果你在循环中渲染div和page-break-inside：避免；不工作 你应该使用这个 CSS hack 来处理特定的 div

float

Answer 8

它对我有用，就像这样：

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

Answer 9

我一直在与此争吵，并且在其他答案中遵循建议我必须确保元素和所有父元素具有样式{{1} }。

Answer 10

对我有用（在FFox和Chrome中都是如此）

.container {
  column-gap: .4em;
  columns: 3;
  padding: .4em;
}

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

就是这样;我不需要position。

Answer 11

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

Answer 12

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

Answer 13

这是我编写打印CSS时解决的方法。

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

<div class="bottom">
    <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>
</div>

然后像这样编写css：

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

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

.bottom{
    display: contents;
}

这旨在使容器消失，使子元素的子元素成为DOM中更高一级的子元素。

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

我希望有帮助。

Answer 14

如果父元素之一具有固定高度（例如 page-break-inside: avoid），height: 1000px 也可能不起作用。我想这是因为浏览器首先尝试将内容调整到指定的高度，然后才考虑分页。

更改为 height: 100% 已为我修复。

Answer 15

我解决了它：我的问题是“一个”父 div（不是“那个”父 div）设置为 display: flex。

我将其设置为 display: block 并且可以正常工作。