Question

实际上，什么条件需要满足，或者page-break-after: always或before何时起作用？我尝试为page-break创建另一个div，即使在更改浮点数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>

Answer 1

这就是我今天在生产中使用的：

在我的LESS文件中

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

  .no-print {
    display: none;
  }
}

然后我的代码<div class="page-break"></div>中有这些divs

它们在分页符时为我工作。打印时，此分页符之后的所有HTML都会在另一页上

分页符后打印时不分页

1 个答案: