html - CSS "orphan"应该在行级还是 block 级运行？

Question

我正在将 HTML 文档呈现为 PDF。以前我用的是Wkhtmltopdf , 但它看起来像 Dompdf为分页符提供更好的支持，所以我希望我会改用它。

我想对我的文档应用一些孤立控件，所以我需要对 orphans 的实际作用有一个透彻的理解。来自 W3C(source):

The orphans property specifies the minimum number of lines in a block container that must be left at the bottom of a page.

网络上一直提供的示例是这样的:

p { orphans: 3; }

这意味着如果没有空间容纳三行段落文本，则强制中断到下一页。我正在渲染一个包含很多无序列表的文档，所以对我来说它将是:

li { orphans: 2; }

但是，理想情况下，我还想打破无序列表，这样元素符号项 block 就不会成为孤儿或寡妇。如果能做到这一点就好了:

ul { orphans: 2; }

理想情况下，这将确保没有元素 block 可以单独出现在分页符的上方或下方。然而，浏览器/渲染器对此的支持是不完整的，上面的 W3C 使用“行”而不是“ block ”这个词。因此，我想上面的内容只会影响列表项中的段落行控制，而不会影响整个列表项 block 。如果是这样，是否有 CSS 方法可以做到这一点？

Answer 1

正如 liZe 在 WeasyPrint issue tracker 上提到的:

Orphans / Widows only work for line-boxes, not for block-like boxes.

Fortunately, you can define rules like:

li:last-child {
  break-before: avoid;
}
li:first-child {
  break-after: avoid;
}