如何在分页的 HTML 文档中强制为空页面？答案

【问题标题】：How to force an empty page in a paged HTML document?如何在分页的 HTML 文档中强制为空页面？
【发布时间】：2020-11-04 06:14:54
【问题描述】：

如何在 HTML 文档中强制为空页？我有一个标题页，之后是强制分页（规则如下）。问题是剩余内容直接出现在下一页上，我希望标题页和剩余内容除以 1 个空白页（如下图所示）。

HTML：

<div class=title-page">
  title
</div>

<div class="content">
  blah blah
</div>

CSS：

.title-page {
  page-break-after: always;
}

预期结果：

 -------
| title |
|       |
|     1 |
 ------- 
 -------
|       |
|       |
|     2 |
 -------
 -------
| blah  |
| blah  |
|     3 |
 -------

我意识到可以通过在标题页和剩余内容之间插入一个空的<div>，然后在其上指定page-break-after: always; 来完成。不过，插入空 div 在语义上不太正确。有没有办法只使用 CSS 来实现相同的结果？

编辑：在这种情况下，也可以使用page-break-after: left; 来完成，因为默认情况下第一页是左页。文档中间的案例怎么样，您无法确定您所在的页面是左侧还是右侧。或者当您想要插入超过 1 个 emtpy 页面时。还能用 CSS 做吗？

【问题讨论】：

stackoverflow.com/q/8230317/3340665
@GhostGambler 对。我应该意识到第一页是左页，可以使用page-break-after: left 完成。但是，当我想在文档中间插入一个空白页面时，我不知道我所在的页面是左边还是右边？或者当我想要超过 1 个空白页面时？还可以用 CSS 完成吗？
根据链接问题中的答案，除了空的div 标签之外，这是无法通过其他方式实现的。
我有一个类似的问题，我使用 paged.js 和一些 hacky 技巧解决了：stackoverflow.com/questions/61037614/…

【解决方案1】：

一种适用于 Chrome 和 IE，但不适用于 Firefox（版本 31）的方法是使用在第一个 div 末尾添加的伪元素并在它之前指定一个分页符。要使伪元素不为空（浏览器可能会将分页符合并为一个），请在此处插入一个不间断空格：

.title-page:after {
  display: block;
  content: "\A0";
  page-break-before: always;
}

因为这在 Firefox 中不起作用，所以最好使用一个虚拟的 div 元素。请注意，如果元素确实为空 <div></div>，这不会导致 Firefox 中的页面为空。相反，将一些显示为空白的内容放在那里，例如

<div class="empty-page">&nbsp;</div>

（与.empty-page { page-break-after: always; }）。

您还可以使用 JavaScript 在由 beforeprint 事件触发的代码中动态添加此类虚拟元素。

【讨论】：