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 中似乎不起作用。 打开演示，右击页面，选择“打印...”。 您会看到一个打印预览 - 第 5 段被分成第 1 页和第 2 页。

我究竟做错了什么？ 我怎样才能在 Chrome 中做到这一点？

---

Answer 1

实际上，它在 Chrome 中确实有效，而且解决方案真的很愚蠢！！

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

position: relative;

看看这个小提琴（或全屏）

这适用于：

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/

堆栈溢出线程：

`page-break-inside: avoid;`的跨浏览器支持

“page-break-inside：避免”- 不起作用

Google Chrome 打印分页符

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

谷歌浏览器论坛：

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

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

Answer 6

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

Answer 7

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

适用于 Chrome 87

Answer 8

什么对我有用（即在 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 9

这是我在编写用于打印的 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 中的下一个级别。

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

我希望这会有所帮助。

Answer 10

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

1. 尝试使用<div></div>块而不是 HTML 表格

2. 不要在你想要page-break-inside: avoid display: flex的父容器上使用display: flex page-break-inside: avoid （在子元素中使用float ）

   .child1{ 浮动：左； }

3.如果你在循环中渲染div和page-break-inside：避免； 不工作你应该使用这个 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;
}

Answer 11

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

page-break-after:always

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

Answer 12

它对我有用，就像这样：

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

Answer 13

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

Answer 14

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

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

Answer 15

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

更改为height: 100%为我修复了它。

Answer 16

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

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

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

现在我们的父子关系已经很明显了，下一步就是给父子俩一些易于实现的规则。 所以让我们这样做

• 家长规则

  display: block;

• 子规则

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

而已！