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中设置一个页面braek，您必须使用选择器: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的详细信息，请访问this和this链接

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

1 个答案: