问答博客资讯标签用户活动
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

Google Chrome 打印分页符

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

我试图让谷歌浏览器做分页符。

我通过一堆网站被告知 page-break-after: always; 在 chrome 中是有效的，但即使是一个非常简单的例子，我似乎也无法让它工作。用chrome打印时有什么方法可以强制分页吗？

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

Stack Overflow 翻译cssprintinggoogle-chrome
阅读 1.3k
2 个回答
得票最新
社区维基
1
✓ 已被采纳

我已经在包括 Chrome 在内的所有主流浏览器中成功使用了以下方法：

 <!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <h1>This is Page 1</h1>
    </div>
    <div class="page">
      <h1>This is Page 2</h1>
    </div>
    <div class="page">
      <h1>This is Page 3</h1>
    </div>
  </body>
</html>

这是一个简化的例子。在实际代码中，每个页面 div 包含更多元素。

原文由 Phil Ross 发布，翻译遵循 CC BY-SA 2.5 许可协议

社区维基
1

实际上，被选择为接受的答案中缺少一个细节（来自 Phil Ross）….

它在 Chrome 中 确实 有效，而且解决方案真的很 愚蠢！！

您要控制分页的父元素和元素都必须声明为：

 position: relative

看看这个小提琴：http: //jsfiddle.net/petersphilo/QCvA5/5/show/

这适用于：

 page-break-before
page-break-after
page-break-inside

但是，在 Safari 中控制 page-break-inside 不起作用（至少在 5.1.7 中）

我希望这有帮助！！！

PS：下面的问题提出了一个事实，即最新版本的 Chrome 不再尊重这一点，即使位置：相对；诡计。然而，他们似乎确实尊重：

 -webkit-region-break-inside: avoid;

看到这个小提琴：http: //jsfiddle.net/petersphilo/QCvA5/23/show

所以我想我们现在必须添加…

希望这可以帮助！

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

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