分页不中断

Question

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

@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

这应该有效。

@media print  
{
    div{
        page-break-after: always;
    }
}

Answer 2

我找到了答案

display: flex;
justify-content: center;
font-size: 10px;

我的 parent div 中有这个作为样式，当我删除它时它有效。虽然我不知道为什么。我希望有人知道为什么这种样式不能让分页符起作用

Answer 3

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

很简单。只需添加一个 div 并跟随 class 到任何你想打破的地方。

.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 元素的子元素。

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

<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>

分页不中断

Page break not breaking

html

css

printing

page-break