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

Question

我正在尝试通过 CSS 优化我的页面以便从浏览器打印。我遇到的问题是正确设置分页符。我有它可以防止在图像和文本 block 中间出现分页符，这些分页符不应该按照我想要的方式完全分开。然而，我遇到的问题是有时有一条水平线分隔一个新部分，然后只是下一节的标题(可能还有对该节的描述)，其余部分下一页显示的实际部分。这是令人困惑和糟糕的格式，因为通常如果该部分的标题靠近页面底部，您只需在它之前插入一个分页符以将整个内容跳到下一页而不用担心您要牺牲的上一页上的少量空间。

这里的 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 }

我希望它能看到整个 block 是牢不可破的，并将整个内容推到下一页，但它什么也没做。也许我只是盯着这个问题太久了。有谁知道如何防止页面的每个部分以这种方式分解？

注意:我不希望它总是在每个部分之前中断，因为如果只有一点点剩余，这可能会浪费大量页面空间上一个。

奖励:如果有人知道您如何能够在水平线断开时隐藏它，那也会很有帮助。但这只是一个小烦恼，我并不真正担心。

Answer 1

我能想到的唯一方法是将水平线移到最后一节的底部，在你想要分页之前。然后将所有下一部分包装在一个节点中，并向其添加无分页符。打印时有太多浏览器无法检测到的因素，因此如果您能巧妙地对事物进行分组，将会大有帮助。