分页不破

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

所以，如果你想制作一个有很多块的布局，每个块占用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>

Answer 2

这应该有用。

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

Answer 3

我找到了答案

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

我将这个在我的父div中作为样式，当我删除它有效。虽然我不知道为什么。我希望有人能够回答为什么这种风格不会让分页工作