我試圖在頁面的打印版本上強制分頁。我通過對我想要分成新頁面的部分進行樣式設置來做到這一點。我遇到的問題是，當我打印時，元素之間會插入一個空白頁面。因此分頁符有效，但在其間添加了額外的空白頁。例如，下面的代碼應該打印兩頁，但實際上總共打印了 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 關注
- 393 瀏覽
添加回答
舉報
0/150
提交
取消