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

Question

如何强制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 |
 -------

我意识到可以在标题页和剩余内容之间插入一个空格，然后在其上标注page-break-after: always;。尽管如此，插入空div在语义上也不正确。有没有办法只使用CSS来实现相同的结果？

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

Answer 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事件触发的代码中动态添加此类虚拟元素。