Question

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

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

Answer 1

您似乎需要一种方法来预览应用了打印样式表的页面。您可以使用Chrome执行此操作，在此处回答：Faster way to develop and test print stylesheets (avoid print preview every time)?

Answer 2

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

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

Answer 3

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

在印刷媒体查询中设置分页 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>

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

3 个答案: