相关疑难解决方法(0)

使用 CSS 强制打印分页符

我有一个页面,基本上显示给定日期的所有工作订单。我尝试创建 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>
Run Code Online (Sandbox Code Playgroud)

我的 CSS 基本上是这样的:

.WOPrint
{
    max-width: 100%;
    padding-bottom: 3em;
}

.WOHeader
{
    display: block;
    page-break-inside: avoid;
}

.WOPageBreak
{
    height: 1px;
    width: 100%;
    float: left; …
Run Code Online (Sandbox Code Playgroud)

css printing xhtml page-break printing-web-page

6
推荐指数
1
解决办法
5643
查看次数

标签 统计

css ×1

page-break ×1

printing ×1

printing-web-page ×1

xhtml ×1