2

我正在尝试通过 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 }

我希望它能够将整个块视为牢不可破，并将整个东西撞到下一页，但它没有做任何事情。也许我只是盯着这个问题太久了。有谁知道我如何防止页面的每个部分以这种方式分解？

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

奖励：如果有人知道如果水平规则在那个时候打破了，你将如何隐藏它，那也会很有帮助。但这只是一个小烦恼，我并不真正担心。

4

1 回答 1

0

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

于 2013-05-20T00:25:15.463 回答