打印时在 HTML 中强制分页的问题
我试图在页面的打印版本上强制分页。我通过对我想要分成新页面的部分进行样式设置来做到这一点。我遇到的问题是，当我打印时，元素之间会插入一个空白页面。因此分页符有效，但在其间添加了额外的空白页。
例如，下面的代码应该打印两页，但实际上总共打印了 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>
jeck猫1回答
-
慕码人8056858
我遇到的问题是我正在使用旧版本的 safari 打印文档。Safari 并不能始终使用break-before 命令。我能够在最新版本的 chrome 中生成所需的打印结果break 命令和 @page css 命令是新功能，并未得到广泛支持
随时随地看视频慕课网APP
相关分类
Html5