我有一个页面,基本上显示给定日期的所有工作订单.我试图创建HTML,以便我可以使用page-break-after：始终创建逻辑打印分页符并继续.但是,当用户打印页面时,通常会有重叠,同一页面上的多个工单等.我只想强制执行Firefox,Safari和Chrome将要收听的硬分页.
我的HTML看起来像这样
<div class="WOPrint">
<div class="WOHeader">
<h1>Header stuff</h1>
</div>
<!-- content -->
</div>
<div class="WOPageBreak"></div>
<div class="WOPrint">
<div class="WOHeader">
<h1>Header stuff</h1>
</div>
<!-- content -->
</div>
<div class="WOPageBreak"></div>
<!-- repeat N times -->
<div class="WOPrint">
<div class="WOHeader">
<h1>Header stuff</h1>
</div>
<!-- content -->
</div>
<div class="WOPageBreak"></div>
我的CSS基本上是这样的：
.WOPrint
{
max-width: 100%;
padding-bottom: 3em;
}
.WOHeader
{
display: block;
page-break-inside: avoid;
}
.WOPageBreak
{
height: 1px;
width: 100%;
float: left;
page-break-after: always;
display: block;
}
编辑
在一次黑客攻击中,我一直在设置WOPrint类的最小高度.当我将它设置为标准的美国纸张尺寸时,将其更改为9英寸似乎为我提供了足够的空间,可以从所有Safari,Firefox和Chrome打印.这肯定不是我想要修复它的方式,但我也不想渲染到PDF.
.WOPrint
{
max-width: 100%;
padding-bottom: 3em;
min-heihgt: 9in
}
解决方法
简短的回答.你不能在所有浏览器中不受支持.除了page-break-after之外,对于page-break-before的支持稍微好一点……
请参阅page-break-before兼容性和page-break-after兼容性
