代码之家 › 专栏 › 技术社区 › Dipak

打印时,后面的分页符不分页

google-chrome css html

Dipak · 技术社区 · 6 年前

实际上,什么情况下需要 page-break-after: always 或 before 作品?我试着为 page-break ,即使它在改变浮动时不起作用, clear:both ,但不起作用。

这里四 sections 只有一页。现在我想断页两段后 print ,但没有中断,仍然全部剩余。虽然 margin-bottom 可以替换,但如果分页符有效

$(document).on('click','#ptn',function(){
  window.print();
})

@media print {
  body *{
    visibility: hidden;
  }
  #pay_btn{
    display: none;
  }
  #printDiv, #printDiv * {
      visibility: visible;
   }
   #printDiv {
      width: 297mm;
      height: 210mm;
      position: absolute;
      left:0;
      bottom:0;
      top:0;
      right:0;
   }
   section:nth-child(even) {
    page-break-after: always;
    background:black;
  }
}
#printDiv section{
  width:22%;
  margin-right:5px;
  height:70mm;
  float:left;
  border:2px solid red;
  margin-bottom:20px;
}

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
  <div class='col100 txtright'><button id='ptn'>Print</button></div>
  <div id='printDiv'>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
   </div>
  </body>
</html>

1 回复 | 直到 6 年前

anvk 6 年前

这就是我今天在制作中用到的:

在我的小档案里

@media print {
  .page-break {
    display: block;
    page-break-before: always;
  }

  .no-print {
    display: none;
  }
}

然后我的代码里有那些div <div class="page-break"></div>

它们是我的分页符。打印时,此分页符后面的所有HTML都将位于另一页上

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

5 月前

Mass · 如何在Tailwind CSS v4中创建配置

5 月前

magenta placenta · 将css变量合并为一个变量

5 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

5 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

6 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

6 月前

Luckkks · 过渡色工作不正常

6 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

6 月前