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

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）。

当然，我可以为最后一个 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

first-child 支持到 IE7，所以我会执行以下操作：

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

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

希望对你有帮助。