我试图在页面的打印版本上强制分页。我通过对我想要分成新页面的部分进行样式设置来做到这一点。我遇到的问题是，当我打印时，元素之间会插入一个空白页面。因此分页符有效，但在其间添加了额外的空白页。例如，下面的代码应该打印两页，但实际上总共打印了 4 页（我想要的两页和两页空白页）。这是页面的完整 html 代码，包括下面的 css；<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <title>DEMO</title> <style type="text/css"> /* JUST IMPORTS , RESTS & MINIMAL DEFAULTS */ /* CSS reset */ * { padding: 0; margin: 0; } .container-flex-column { display: flex; flex-direction: column; } .page-width-mobi { min-width: 1072px; max-width: 1072px; } .new-page { page-break-before: always; box-sizing: border-box; border-bottom: solid lightgray 20px; } .page-size-mobi { min-height: 1505px; max-height: 1505px; min-width: 1072px; max-width: 1072px; } </style> </head> <body> <main class="container-flex-column page-width-mobi"> <section class="new-page page-size-mobi"> <h1>Page 1</h1> </section> <section class="new-page page-size-mobi"> <h1>Page 2</h1> </section> </main> </body></html>
1 回答
慕码人8056858
TA贡献1803条经验 获得超6个赞
我遇到的问题是我正在使用旧版本的 safari 打印文档。Safari 并不能始终使用break-before 命令。我能够在最新版本的 chrome 中生成所需的打印结果
break 命令和 @page css 命令是新功能，并未得到广泛支持
- 1 回答
- 0 关注
- 293 浏览
添加回答
举报
0/150
提交
取消