I have a page that basically displays all work orders for a given day. I have tried to create the HTML so that I can use page-break-after: always to create a logical print page break and continue on. However when the user prints the page, there are often overlaps, multiple work orders on the same page, etc. I simply want to enforce a hard page break that Firefox, Safari, and Chrome will listen to.
My HTML looks like this
<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>
and my CSS is basically like so:
.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;
}
EDIT
In a hackish attempt I have played around with setting the WOPrint class min-height. Changing it to 9 inches seems to give me enough margin room for printing from all Safari, Firefox, and Chrome when I have it set to a standard US paper size. This is certainly not the way I would like to fix it, but I also don't want to have to render to PDF.
.WOPrint
{
max-width: 100%;
padding-bottom: 3em;
min-heihgt: 9in
}
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…