div 元素的 page-break-after / page-break-after 属性

Question

我的 html 具有这种结构：

<div>
    <div class="pagebr">content1</div>
    <div class="pagebr">content2</div>
    <div class="pagebr">content3</div>
    <div class="pagebr">content4</div>
    <div class="pagebr">content5</div>
    <div class="pagebr">content6</div>
    <div class="pagebr">content7</div>
</div>

所有内部Div元素都是动态变化的。有时会有一两个div，也可能是全部。它不是固定的。但总共是 7。当我写课时 -

div.pagebr
{
    page-break-after:always;   
}

每个 div 都会移动到下一个新页面，在div元素后创建空白空间。 page-break-before:always;做同样的事情并且page-break-after:auto; 不再工作了。

我应该如何为 Div 元素添加类，以便它们可以适合每个页面而不破坏？或者有其他解决方案吗？

任何帮助表示赞赏。谢谢。

Answer 1

如果是动态元素，则页面内容无法适合页面。如果您想避免 div 内分页，您可以指定page-break-inside:avoid;如下示例

div.pagebr
{
    page-break-inside:avoid;
}

<div>
    <div class="pagebr">content1</div>
    <div class="pagebr">content2</div>
    <div class="pagebr">content3</div>
    <div class="pagebr">content4</div>
    <div class="pagebr">content5</div>
    <div class="pagebr">content6</div>
    <div class="pagebr">content7</div>
</div>

替代方式

如果您希望div页面内有 3 秒，那么您可以采用以下解决方案

要在每 3 个 div 中有一个分页符，您必须使用选择器:nth-child(3n)给出page-break-after: always;

div.pagebr:nth-child(3n) {
  page-break-after: always;
}

<div>
  <div class="pagebr">content1</div>
  <div class="pagebr">content2</div>
  <div class="pagebr">content3</div>
  <div class="pagebr">content4</div>
  <div class="pagebr">content5</div>
  <div class="pagebr">content6</div>
  <div class="pagebr">content7</div>
</div>

要了解有关更多详细信息，page-break请浏览此链接和此链接