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 中工作？

---

原文由 Šime Vidas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

 position: relative;

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

这适用于：

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

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

我希望这有帮助！！！

原文由 Peter 发布，翻译遵循 CC BY-SA 3.0 许可协议