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

替代方式

如果你想在一个页面中放置 3 个 div，那么你可以使用以下解决方案

要在每 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>

要了解有关分页符的更多详细信息，请查看this。和 this链接