注意:我自己提问和回答,因为我花了 3 天尝试不同的方法来找到解决方案,希望这对某人有帮助。这个问题以前曾被问过,但它们已经过时了,答案不清楚或不令人满意。
在使用具有 float 的元素打印时尝试添加分页符(例如:使用 Bootstrap 网格)不起作用。分页符被忽略。
<div style="float:right;">floating div</div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12 break-after">
Add page break after this element when printing
</div>
<div class="col-xs-12">
This should be printed on next page
</div>
</div>
</div>
<style type="text/css">
.break-after {
page-break-after: always;
}
</style>
最佳答案
首先,分页符在绝对定位的元素内不起作用,因此请确保分页符不在绝对定位的元素内。
现在,由于 float 导致分页符被忽略,我们需要清除 float 。
问题是 clear: both;
如果元素带有 page-break-after: always;
则不起作用是一个 float (例如: Bootstrap 中的.col-xs-12
)。
技巧是使用 clear
添加 2 个新的 div和page-break
在要添加分页符的 div 之后:
<div class="page-break-clear"></div>
<div class="page-break"> </div>
<style type="text/css">
.page-break-clear {
clear: both;
}
.page-break {
page-break-after: always; /* depreciating, use break-after */
break-after: page;
height: 0px;
display: block!important;
}
</style>
放在一起:
<div style="float:right;">floating div</div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12 break-after">
Add page break after this element when printing
</div>
<!-- These 2 new added divs will clear float and add the page break -->
<div class="page-break-clear"></div>
<div class="page-break"> </div>
<div class="col-xs-12">
This should be printed on next page
</div>
</div>
</div>
<style type="text/css">
.page-break-clear {
clear: both;
}
.page-break {
page-break-after: always; /* depreciating, use break-after */
break-after: page;
height: 0px;
display: block!important;
}
</style>
作为旁注:我建议删除 page-break-after
css .break-after
问题中提供的类,用于防止在 float 被删除且实际有效的情况下分页符加倍。
此外,如果您使用 jquery 并且不想手动添加这 2 个分页符 div,为了让您的生活更轻松,只需运行以下代码,该代码将自动将它们添加到类 .break-after
的所有元素之后。 :
$('.break-after').after('<div class="page-break-clear"></div><div class="page-break"> </div>');
关于HTML/CSS 打印 float 分页符不起作用(例如 : bootstrap),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47205328/