javascript - HTML 分页问题

Question

我正在将 HTML 转换为 PDF，它工作得很好，但我对数据的显示方式有疑问。

我有一个字符串数组，我正在循环它们并在我的 ejs 模板中显示它们。例如:

<div style="page-break-after: auto; padding: 10px;">
  <h3>Cost Saving Calculation:</h3>
  <p><%= modules[i].costSavedInfo %></p>
</div>

<div style="page-break-after: auto; padding: 10px;">
  <h3>Culture Change</h3>
  <p><%= modules[i].cultureChange %></p> 
</div>

<div style="page-break-after: auto; padding: 10px;">
  <h3>Other Efficiency</h3>
  <p><%= modules[i].otherEfficieny %></p>
</div>

问题:

生成 PDF 后，文本将显示在 2 页上，如下所示:

在上图中，一半文本位于一页 pdf 页面上，另一半位于第二页上。

我不确定这是否可能，但如果要跨 2 个页面显示，我如何更改将文本移动到新页面的 HTML。现在数组中文本的长度可以是任何长度。没有字数限制。

这可能吗？

Answer 1

当分页符使段落困惑时遇到的问题称为孤儿和寡妇。

您可以通过 CSS 定义在破坏页面之前有多少行不分隔。

请查看这些说明:

widows - “CSS 中的 widows 属性控制可以落入新页面的段落的最小行数。”

orphans - “orphan 属性控制旧页面上可以保留的段落的最小行数。”

我认为，您想要定义这两个属性以获得有意义的输出。