html - 分页不中断

Question

我想有分页符，但它不起作用。我试图发布整个代码，但它超过了字符数。我想知道什么可能导致分页符不起作用。

@media print {
    div.pagebreak {
        display: block !important; 
        page-break-after: always; 
    }
    .dontprint{ 
        display : none
    }
    body{
        display: block;
    }

}

<tr ><td><div class="pagebreak"></div></td></tr>

Answer 1

因为我发现分页系列只适用于 display: block; 元素，所以我想出了一个几乎适用于任何情况的解决方案。

很简单。只需将带有以下类的 div 添加到您想要中断的任何地方。

.page-break {
  page-break-after: always;
  height: 0;
  display: block;  // optional. must be sure it is block item in document flow
  clear: both;   // optional. use only if you are using float
}

注意这个元素不能是 flex 元素的子元素。

所以，如果你想制作一个有很多 block 的布局，每个 block 占页面宽度的 50%，每 2 个 block 后分页，你可以这样做:

<div style="float: left; width: 50%; height: 300px">left</div>
<div style="float: left; width: 50%; height: 400px">right</div>
<div class="page-break">&nbsp;</div>
<div style="float: left; width: 50%; height: 300px">left</div>
<div style="float: left; width: 50%; height: 400px">right</div>