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;

看看这个小提琴(或全屏)

这适用于:

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

但是,page-break-inside在Safari中控制不起作用(至少在5.1.7中)

我希望这有帮助!!!

Answer 2

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

Answer 3

我知道这是一个老问题，但 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 4

根据 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/

堆栈溢出线程：

跨浏览器支持“page-break-inside：避免；”

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

Google Chrome 打印分页符

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

谷歌浏览器论坛：

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

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

Answer 5

这对我来说最有效：

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

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

Answer 6

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

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

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

   .child1{ 浮动：左；}

3.如果你在循环和分页内部渲染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;
}