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

【问题标题】：page-break-inside doesn't work in Chrome?page-break-inside 在 Chrome 中不起作用？
【发布时间】：2011-12-04 02:59:38
【问题描述】：

我在一个页面上有一堆段落：

<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 中进行这项工作？

【问题讨论】：

您运行的是哪个版本的 Chrome？你的 jsFiddle 对我有用。我的版本是 14.0.835.202 m。
@TonyLeeper 我有相同的版本。
@TonyLeeper 我用图片更新了我的问题。该段落被推送到您的 Chrome 中的 2. 页面上？
@Šime Vidas 在我的 14.0.835.202 m Chrome 上，但它工作正常..
是的，但没关系，我认为我的打印设置与您的不同，您的示例适合我的第 1 页。我把段落放大了，可以看到和你现在一样的问题。

标签： html css google-chrome

【解决方案1】：

根据 SitePoint，这里不支持 Chrome，只支持 Opera（和 IE 8 buggy）...

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

其他参考资料：

http://www.webdevout.net

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

堆栈溢出线程：

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?

谷歌浏览器论坛：

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

我不会发布 W3Schools 链接（由于一般不可靠），但他们也声明它仅在 Opera 中受支持，无论它值多少钱。

【讨论】：

“Chrome 3 及以下版本不支持此属性。”
第一个链接测试 Chrome 2（现在是第 14 版），第二个链接没有提到 Chrome。
Wiki 比较页面说它是在 Webkit 中实现的：http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)
@ŠimeVidas：当然，其他人报告它在这里工作：stackoverflow.com/questions/1630819/…
@Šime Vidas，您的经验似乎表明 MDN 是错误的。

【解决方案2】：

我刚刚在 IE9、Chrome 14 和 Firefox 7 中使用更大的段落对此进行了测试，看起来只有 IE9 可以按预期工作。您可能不得不在需要的地方手动添加分页符

page-break-after:always

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

【讨论】：

我很困惑为什么 Chrome 和 Firefox 不会实现这一点。这是一个如此古老的功能......
@ŠimeVidas 是的，很奇怪啊。 w3.org/TR/css3-page/#allowed-pg-brk 的规范表明它应该可以工作。事实上，Chrome 和 Firefox 似乎违反了规则 D，因为 p 是块级元素。

【解决方案3】：

实际上，它确实在 Chrome 中工作，而且解决方案真的是傻！！

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

position: relative;

看看这个fiddle（或fullscreen）

这适用于：

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

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

希望对你有帮助！！！

【讨论】：

其实Chrome好像实现了page-break-inside。我的原始演示（来自我的回答）现在可以在 Chrome :D 中使用
确实，page-break-inside 在 Chrome 中确实有效（只要您不在元素或其父元素上声明 position: absolute; ，但它在 Safari中无效>（至少是 5.x 版本）- 干杯！
我不知道你是怎么想出来的，但它解决了我使用 wkhtmltopdf 时遇到的分页问题 - 谢谢！
在 div 上对我不起作用，尽管建议使用 CSS {display: block;位置：相对；page-break-before：自动；page-break-after：auto；page-break-inside：避免；}。必须有另一个细微差别
好像有display: flex 不支持page-break-inside 属性。将显示类型更改为 block 对我有用！

【解决方案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());

【讨论】：

“你想要的元素的高度” - 哪一个，我不想被分解的段落，或者它们的容器元素？
@ŠimeVidas - 根据您的评论进行澄清。
我做了一个新的演示：output.jsbin.com/fuvazi/quiet 据我所知，page-break-inside: avoid 现在可以在 Chrome 中使用。我没有指定任何高度。
是的，这会很好。我说的是page-break-inside: avoid 是一个 div，里面有其他 div，而 div 里面的那些 div 是浮动的。
嗯，我不会在打印布局中浮动，至少不是主要段落。如果页面使用浮动，我会在打印样式表中恢复它们。

【解决方案5】：

它对我有用，像这样：

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

【讨论】：

【解决方案6】：

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

【讨论】：

关闭，但我发现我需要display: inline-table
在各种其他网站和 StackOverflow 问题上浪费了一个小时之后，就是这样 - 我想避免破坏的元素的容器有 display: flex;。直到永恒的尽头，我自己也不会想到这一点。谢谢！

【解决方案7】：

什么对我有用（即在 FFox 和 Chrome 中）

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

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

就是这样；我不需要position。

【讨论】：

【解决方案8】：

检查父（或顶级容器）显示是否为flex；删除并重试；它在 chrome71 中对我有用

【讨论】：

我确认这行得通。

【解决方案9】：

这对我来说效果最好：

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

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

【讨论】：

我刚刚在 Chrome 中检查了我的原始代码。看来这现在有效。在 Chrome 中打开这个演示 output.jsbin.com/ziruyoc/quiet 并检查打印预览。
我使用的是 Bootstrap v3.3，我能够排除width: 100%;，这很有效！你是男人
显示：内联块；正如安德鲁福克斯所说的那样为我做了。引导程序 4.5

【解决方案10】：

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

【讨论】：

【解决方案11】：

这是我在编写用于打印的 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;
}

有时它不会像你期望的那样工作，因为大多数元素的默认显示值是块或内联，这不是“分页友好”。我通常是这样改的：

.bottom{
    display: contents;
}

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

关于你的问题，建议你看一下段落容器的显示方式，看是否设置为阻塞。如果是这样，请将其更改为内容并重试。

希望对你有所帮助。

【讨论】：

如果我在顶部容器中使用 display: flex 会怎样？

【解决方案12】：

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

适用于 Chrome 87

【讨论】：

【解决方案13】：

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

我将它设置为display: block，它可以工作。

【讨论】：

【解决方案14】：

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

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

【讨论】：

【解决方案15】：

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

尝试使用<div></div>blocks 代替 HTML 表格
不要在你想要page-break-inside: avoid的父容器上使用display: flex（在子元素中使用float）

.child1{ 向左飘浮; }

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

<div class="parent-container">
<div class="child1"></div>
<div class="child2"></div>
</div>
.parent-container{
 position: relative;
 page-break-inside: avoid;
} 
.parent-container::after {
content: "";
display: block;
height: 200px;
margin-bottom: -200px;
}

【讨论】：

【解决方案16】：

经过大量挖掘，这似乎是一个非常愚蠢，烦人且简单的问题。解决这个问题的关键是：

首先，让我们定义什么是父母和孩子。

Child：这是我们需要防止/避免在 pdf 页面之间切换的元素
父母：它是孩子的直接父母/容器

现在我们有了非常明显的父母和孩子，下一步是给父母和孩子一些易于实施的规则。所以让我们这样做

父规则

display: block;
子规则

display: block; position: relative: page-break-inside: avoid;

就是这样！

【讨论】：