page-break-* 在 Chrome 和 Safari 上不起作用

Question

我知道关于这个主题有很多问题，但我仍然找不到有效的解决方案。所以，这是我的 html：

<div class="row">
    <div class="col-xs-12">
      <div class="row print-break">
        <div class="col-xs-8 col-xs-offset-2">
          <!-- Some Content -->
        </div>
      </div>
      <div class="row print-break">
        <div class="col-xs-8 col-xs-offset-2">
          <!-- Some Content -->
        </div>
      </div>
      <div class="row print-break">
        <div class="col-xs-8 col-xs-offset-2">
          <!-- Some Content -->
        </div>
      </div>
    </div>
  </div>

还有css：

@media print {
   .print-break {
      page-break-after: always;
      page-break-inside: avoid;
   }
}

碰巧Firefox插入页面正确中断； Chrome 和 Safari 没有。

有谁知道如何克服这个问题？或者我可能错在哪里？

Answer 1

您的特定代码有几项讨论，这些单独是正确的，但共同导致您的问题。

不幸的是，page-break-after 的工作方式因浏览器而异，人们无法假设某种行为，因此我们需要恢复为更简单的已知行为。

某些浏览器不会在 parent 具有 float 和/或 width 的 div 上分页。

我从您的代码中假设您正在使用 Bootstrap (?)。您在代码中有一个嵌套网格：外部行/列是 12 宽。 （为什么要嵌套在 12 宽的父项中？）这个外部列设置了 width: 100%，因此 Safari 不会对其子项进行分页 - 因此您的嵌套项不会分页。

我不知道您为什么要嵌套在 12 宽上，但是如果您可以删除它，那么您的分页符将起作用。

我个人还在一个独立的分隔符标记（div 或 span）中分页 - 这使代码更易于阅读，如果我愿意，我还可以设置标记的样式。 em>

您也不需要row 每一行，只需clearfix 将“新行”，这允许我们使用相同的分隔符。

您的代码的非嵌套重写因此可以工作（或者它在我的 Safari 中）：

<div class="row">
  <div class="col-xs-8 col-xs-offset-2">
    Some Content 1
  </div>
  <div class="print-break clearfix"></div>
  <div class="col-xs-8 col-xs-offset-2">
    Some Content 2
  </div>
  <div class="print-break clearfix"></div>
  <div class="col-xs-8 col-xs-offset-2">
    Some Content 3
  </div>
</div>

CSS 将是：

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

（你真的不需要@media print - 在这种情况下它是多余的。）

Answer 2

确保具有page-break-after: always; 的元素没有将float 属性设置为none; 以外的其他值的父元素，同时检查它是否是block 元素。如果是inline-block 元素，则根本不会应用分页符。