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

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 两者在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 子类仅对列表中的第一个元素设置样式。

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