如何在分页的HTML文档中强制使用空白页？

Question

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

HTML：

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

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

CSS：

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

预期结果：

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

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

我知道可以在标题页和其余内容之间插入一个空白，然后对其page-break-after: always;进行窥视。不过，插入空div在语义上不太正确。有没有办法仅使用CSS来达到相同的结果？

编辑：在这种情况下，也可以用完成page-break-after: left;，因为默认情况下第一页是左页。那么在文档中间的情况下，您无法确定所在页面是左还是右。或者，当您要插入1个以上的空白页面时。还能用CSS完成吗？

Answer 1

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

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

由于这在Firefox中不起作用，因此最好使用虚拟div元素。请注意，如果元素确实为空，这将不会在Firefox中导致空白页<div></div>。而是将一些内容显示为空白，例如

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

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

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