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屋!