避免标题和第一个列表项之间的分页符

Question

我有一个 HTML 文档，我想确保在打印时，分页符不会立即出现在标题之后。

在理想情况下，这就像设置.heading {page-break-after: avoid;} 一样简单，但大多数浏览器不支持page-break-after: avoid（或page-break-before: avoid），只支持page-break-inside: avoid。

当像p 这样的独立元素跟随我的标题时，我可以将标题和段落包裹在<div class="nobreak"> 中，并避免在.nobreak 元素中出现分页符。

但有时，标题后面会出现一长串：

<h1>A list of things</h1>
<ol>
  <li>This is the first thing.</li>
  <li>This is the next thing.</li>
  ...
  <li>Many things later, we reach the end.</li>
</ol>

我可以将 h1 和 ol both 包装在 div.nobreak 中，但这太严格了：它可以防止在列表中的任何时候发生分页符，而实际上我只关心在第一个 li 之前防止中断。

出于显而易见的原因（ol 标记的存在），我不能只将 h1 和第一个 li 包装在周围元素中。

关于如何在这里达到预期效果的任何想法？

Answer 1

<style>
 h1 { margin-bottom: 0; padding-bottom:0;}
 ol, li:first-child { margin-top: 0; padding-top: 0; }
</style>

使用li:first-child 子类仅设置列表中第一个元素的样式。

确保环绕元素之间没有其他边距或填充。