Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
412 views
in Technique[技术] by (71.8m points)

xhtml - Enforce Print Page Breaks with CSS

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

short answer. You can't it's not consistetly supported across all browsers. there is slightly better support for page-break-before than page-break-after though...

see page-break-before compatibility and page-break-after compatibility

you could also try embedding a Ctrl-L in the page at those points thought I'm pretty sure a lot of printer drivers are gonna ignore that.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...