更新时间: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.)