如何在CSS打印样式中标记分页符

Question

我需要查看浏览器在打印预览中的确切位置,以便我可以使用CSS属性修改该行为.换句话说,我需要设置分页本身的样式(当然是为了测试目的),所以我可以看到分页的位置,以便我知道哪些选择器可以使用page-break-after/inside/before属性进行修改.

为了澄清这一点,我不是在寻找Chrome Dev Tools打印模拟.遗憾的是,该工具无法显示打印页面的样子(任何人都可以将其结果与Chrome浏览器或任何其他浏览器中的CTRL P加入的打印预览窗口中的结果进行比较).但是,当您需要确定某些打印CSS规则是否覆盖某些屏幕媒体规则时,该工具可能很有用.但是在这种情况下,当您需要找到浏览器呈现的分页符的确切位置以便手动修改分页符行为时,它没有多大帮助.

Answer 1

我建议page-break-after在您的印刷媒体样式中使用。将其添加到选择器中，如下所示，页面将正确断开。

@media print {
  footer {
    page-break-after: always;
  }
}