HTML – 如何在CSS中的绝对定位元素之间强制分页

2023年8月8日 305次阅读

html打印表单使用绝对定位的元素设计.

如何在某些行之间强制分页.

我尝试了下面的代码,但是第一页和第2页出现在第一页,如果从浏览器打印,则空页结束.
如何强制page1和page2出现在单独的页面中？

<!DOCTYPE html>
<html>
<head>

<style>
  div {
    position: absolute;
  }

    @page {
      visibility: hidden;
      margin: 0 15px;
      height: auto;
    }

    .break {
      page-break-before: always;
    }
</style>
</head>

<body>
  <div class='break'></div>
<div style='top:11.58cm;'>page1</div>
  <div class='break'></div>
<div style='top:13.35cm;'>page2</div>
</body>
</html>

我还尝试将第二页内容更改为

<div  class='break' style='top:1cm;'>page2</div>

但这两行仍然印在第一页.

最佳答案 游戏稍晚,但这可能对将来的参考有用：

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

.absolute {
  position: absolute;
}
<div class='break'>
  <div class="absolute" style='top:11.58cm;'>page1</div>
</div>
<div class='break'>
  <div class="absolute" style='top:13.35cm;'>page2</div>
</div>

工作JSfiddle

要进行测试,请选择结果中的文本并进行打印.

点赞