我如何建议水平规则作为良好的分页点？

Question

我正在尝试通过CSS优化我的页面以便从浏览器打印。我遇到的问题是正确设置分页符。我有它防止图像中间的分页和文本块不应该完全分开我想要的。但是，我遇到的问题是，有时会有一个水平规则将新部分分开，然后只是下一部分的标题（可能是该部分的描述），其余部分实际部分显示在下一页上。这是令人困惑和糟糕的格式化，因为通常如果该部分的标题是靠近页面的底部，你只需要在它之前抛出一个分页符来将整个事情发生到下一页而不用担心你牺牲的上一页空间很小。

这里的HTML非常简单。它不是包含在一百万个东西中，只是一个横向规则，标题，带有描述的段落，然后是该部分的内容。我试图做的是将标题和描述一起包装在一个分区中，使其不能在内部或之后分页，如下所示：

<a id="section_1"></a>
<div class="no-page-break">
    <h2>Section 1</h2>
    <p>Section 1 Description</p>
</div>
<div>
    <!-- all the content for this section -->
</div>
<hr />
<a id="section_2"></a>
<div class="no-page-break">
    <h2>Section 2</h2>
    <p>Section 2 Description</p>
</div>
<div>
    <!-- all the content for this section -->
</div>
<!-- and so on -->

.no-page-break { page-break-after: avoid; page-break-inside: avoid }

我希望它会看到整个区块不可破坏并将整个事情推到下一页，但它没有做任何事情。也许我一直在盯着这个问题太久了。有谁知道如何防止我的页面的每个部分以这种方式分解？

注意：我不希望它在每个部分之前始终中断，因为如果只剩下一点点遗留下来，这可能会浪费大量的页面空间上一个。

加分：如果有人知道你如何能够隐藏横向规则，如果它在那时突破了，那也是有帮助的。但这只是一个小麻烦，我并不担心。

Answer 1

我能想到的唯一方法是将水平规则移到最后一部分的底部，然后再进行分页。然后将节点中的所有下一部分包装起来，并为其添加no-page-break。打印时有太多因素导致浏览器无法检测到，所以如果你能巧妙地对事物进行分组，那将会有很大的帮助。