2

如何在 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 完成吗？

4

1 回答 1

6

一种适用于 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 在由事件触发的代码中动态添加这样的虚拟元素。

于 2014-08-04T10:02:30.410 回答