如何在 CSS 打印样式中标记分页符出现答案

【问题标题】：How to mark page break occurrences in CSS print style如何在 CSS 打印样式中标记分页符出现
【发布时间】：2015-05-15 20:56:15
【问题描述】：

我需要查看浏览器在打印预览中准确放置分页符的位置，以便我可以使用 CSS 属性修改该行为。换句话说，我需要设置分页符本身的样式（当然是为了测试目的），所以我可以看到分页符会发生在哪里，这样我就知道要使用 page-break-after/inside/before 属性修改哪些选择器。

为了澄清这一点，我不是在寻找 Chrome Dev Tools 打印仿真。不幸的是，该工具没有显示打印页面的外观（任何人都可以将其结果与 Chrome 或任何其他浏览器中的 CTRL P 访问的打印预览窗口中的结果进行比较)。但是，当您需要确定某些打印 CSS 规则是否覆盖某些屏幕媒体规则时，该工具可能会很有用。但是在这种情况下，当您需要定位浏览器呈现的分页符的确切位置以便手动修改分页符行为时，它并没有多大帮助。

【问题讨论】：

Faster way to develop and test print stylesheets (avoid print preview every time)?的可能重复
我知道这是旧的，但是，你找到办法了吗？
显然分页符取决于所选的页面大小/方向，但对于诸如 page-break-before: always 之类的 css 规则，这可以显示在任何开发版本的打印预览或开发工具中的打印 css 媒体规则中。
如果您的分页符不起作用，请删除任何display: flex，尤其是在应该中断的容器 div 上。希望这个对你有帮助。我希望有一种更简单的方法来查看这些分页符出了什么问题，调试起来很痛苦。

标签： css printing

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

创建一个包含您的分页符规则的类，并将该类应用于您要添加分页符的所有元素。我就是这样做的：

在打印媒体查询中设置 page-break CSS 属性。
在仅屏幕的媒体查询中设置视觉指南

将此代码复制到一个新的 HTML 文件中进行测试。

/*This media query will make sure the page break will be 
  added in print and is applied to print media only */
@media print {
  .page-break-after {
    page-break-after: always;
  }
}

/* This will show only on screen (always) */
@media screen {
  .page-break-after {
    display: block;
    border-bottom: 2px solid red;
    overflow: visible;
    position: relative;
  }
  .page-break-after:before {
    content: "Page Break";
    font-family: arial, helvetica, sans-serif;
    color: red;
    display: block;
    font-size: 8px;
    margin-top: -8px;
  }
}

<div class="container">
  <h1>Some title page 1</h1>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <div class="page-break-after"></div>
  <h1>Some subtitle page 2</h1>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <div class="page-break-after"></div>
  <h1>Some subtitle page 3</h1>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
</div>

【讨论】：