page-break- *在Chrome和Safari上不起作用 [英] page-break-* doesn't work on Chrome and Safari

问题描述

我知道这个主题有很多问题，但是我仍然找不到可行的解决方案。因此，这是我的html：

I know that there're lots of questions on this topic, but I still could not find a working solution. So, here's my 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没有。

And it happens that Firefox insert page breaks properly; Chrome and Safari doesn't.

有人知道如何克服这个问题吗？还是我可能在哪里错了？

Do anyone know how to overcome this? Or where am I possibly wrong?

推荐答案

您的特定代码中有几个讨论项目，这些单独讨论是正确的，但是一起导致

Your specific code has a few items of discussion, these individually are correct, but together cause your issue.

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

Unfortunately page-break-after works differently from browser to browser, one cannot assume a behaviour and we thus need to revert to a simpler, known behaviour.

某些浏览器不会在具有父级且具有父级的div上分页浮动和/或宽度为 。

Some browsers will not page-break on a div with a parent that has a float and/or has a width.

I从您的代码中假设您正在使用Bootstrap（？）。您在代码中有一个嵌套的网格：外部行/列的宽度为12。 （为什么在12英寸宽的父级中嵌套？）此外部col设置了 width：100％，因此Safari不会对其子页面进行分页-因此您的嵌套项不会分页符。

I'm assuming from your code that you're using Bootstrap (?). You have a nested grid in the code: The outer row/col is 12 wide. (Why nest inside a 12-wide parent?) This outer col sets a width: 100%, so Safari will not page-break it's children - so your nested items will not page-break.

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

I can't tell why you're nesting on a 12-wide, but if you can remove that then your page-break will work.

我个人也使用独立的分隔符（ div 或 span ）-这样使代码更易于阅读，并且我还可以根据需要对标签进行样式设置。

I personally also page-break in an independent, separator tag (a div or a span) - this makes the code easier to read and I can also style the tag if I wish.

您也不需要每行行，只需 clearfix 即可新建行，并且允许我们使用相同的分隔符。

You also don't need to row each row, just a clearfix will 'new row', and this allows us to use that same separator.

这样，对代码进行了未嵌套的重写就可以了（或者在我的Safari中也可以）：

An un-nested rewrite of your code thus then works (or it does in my 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 -在这种情况下是多余的。）

(You don't really need @media print - it's superfluous in this context.)

这篇关于page-break- *在Chrome和Safari上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！