html – 之前的CSS分页符(左和右)不起作用

2023年10月21日 195次阅读

我的目标是从浏览器打印一系列字母.对于在纸张两面打印字母的用户,我希望确保在前一个字母的背面永远不会开始新的字母.字母长度不一,有些是2页,有些是3.

似乎以下CSS应解决此问题：

page-break-before: left

但是,当我整理样本时,它似乎没有按预期工作.

<html>
<head>
<style>
h2.left { page-break-before: left; }
</style>
</head>
<body>

<h2 class="left">New Section</h2>
<h2 class="left">New Section</h2>
<h2 class="left">New Section</h2>
<h2 class="left">New Section</h2>
<h2 class="left">New Section</h2>

</body>
</html>

我希望代码打印9页,每页之间有一个空白页面强制下一页到“左”.实际上,打印预览只是在它自己的页面上显示每个h2,在开头有一个空白页面.

我误解了这个CSS是如何工作的还是我的实现不正确？

更新：我在Chrome,Safari和Opera中对此进行了测试 – 其中任何一个似乎都没有按预期工作.

最佳答案 它看起来像目前支持的唯一浏览器：

page-break-before: left|right
page-break-after: left|right

是Internet Explorer,Edge和Opera Mini
(来源：http://caniuse.com/#feat=css-page-break)

如果使用“左”或“右”,其他浏览器通常默认为“始终”,这解释了初始问题中的结果.

点赞