Question

我遇到了分页符和css 的问题：

我有这个html代码（由php生成）

<div class="form-table courses">
coursename and pupils...
</div>
<div class="form-table courses">
coursename and pupils...
</div>
<div class="form-table courses">
coursename and pupils...
</div>

我的css是这样的：

.form-table.courses {page-break-after:always;}

上面会生成4页，因为它甚至在上面的第三个div之后设置了分页符。 是否有任何“简单”的方法可以获得3页？

我在考虑css的last-child属性，但我理解在IE8及以下版本中不支持这种情况 - 这还不够好（它必须至少处理ie8 - 优先ie7）。 p>

当然我可以为最后一个div添加一个类，然后像这样修改css：

<div class="form-table courses">
coursename and pupils...
</div>
<div class="form-table courses">
coursename and pupils...
</div>
<div class="form-table courses lastpage">
coursename and pupils...
</div>

并将此行添加到我的css：

.form-table.courses.lastpage {page-break-after:"";}

我的解决方案是唯一具有某种跨浏览器兼容性的解决方案吗？或者我错过了一些我应该使用的css的属性/值？

Answer 1

另一种更具可读性的方法是

.page-break {
    page-break-after: always;
}

.page-break:last-child {
    page-break-after: avoid;
}

除了最后一个之外的所有div，这将会中断

<div id="container">
<div class="form-table page-break">
 <!-- First Child -->
 coursename and pupils...
</div>
<div class="form-table page-break">
 <!-- Second Child -->
 coursename and pupils...
</div>
<div class="form-table page-break">
 <!-- Third Child -->
 coursename and pupils...
</div>
<div class="form-table page-break">
 <!-- Last Child -->
 coursename and pupils...
</div>
</div>

Answer 2

IE7支持

first-child，因此我会执行以下操作：

.courses {
    page-break-before: always;
}

.courses:first-child {
    page-break-before: avoid;
}

我希望有所帮助。

分页符和css - 如何跳过最后一页？

2 个答案: