问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

page-break-after 在 Chrome 中不起作用

社区维基
1
新手上路，请多包涵

我在打印期间在 Google Chrome 中遇到了 page-break-after 问题。好像不行。我试过 Firefox，那里没问题。我的代码是：

 <div style="position: relative; display: block;">

    <div style="display: block; page-break-after: always; position: relative;">Page 1</div>

    <div style="display: block; position: relative; page-break-before:always;">Page 2</div>

</div>

有什么技巧可以在 Chrome 中完成吗？

原文由 Deathlex 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssgoogle-chromepage-break
阅读 1.9k
2 个回答
得票最新
社区维基
1
✓ 已被采纳

这是一个 hack，但 Chrome 不能很好地支持分页符。所以尝试改用它：

 <body>
    <main role="main">
        <section class="tabs">
            <div class="tabbed-content">
                <div class="break-after">Page 1</div>
                <div class="break-before">Page 2</div>
            </div>
        </section>
    </main>
</body>

并将其添加到您的 CSS 中：

 html, body, .main, .tabs, .tabbed-content { float: none; }

.break-after {
    display: block;
    page-break-after: always;
    position: relative;
}

.break-before {
    display: block;
    page-break-before: always;
    position: relative;
}

原文由 M Zeinstra 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

请注意分页工作，div 不应该有任何浮动！

因此，如果您的 div 说 float:left ，请将其重置为 print saying: float: none ，这将使分页符再次工作。

原文由 Mohsin 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题