html - 如何在分页的 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 |
 -------

我意识到可以通过插入一个空的 <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 动态添加此类虚拟元素事件。