且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-12-06 08:56:52

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

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.)