page-break-after / page-break-after property for div elements

Question

My html is having this kind of structure :

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

All the inner Div elements are coming dynamically. Sometimes there will be one or two div or may be all. It is not fixed. But total are 7. When I write class -

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

Every div move to next new page creating empty space after div element. page-break-before:always; does the same and page-break-after:auto; is not working anymore.

How should I add class for the Div elements, so that they can be fit on each page without breaking? Or is there any alternate solution?

Any help is appreciated. Thanks.

score 6 · Accepted Answer · answered Jun 08 '17 at 12:03

Page content can not be fit in a page in case of dynamic elements. If you want avoid page break inside your div you can specify page-break-inside:avoid; like following example

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>

Alternative way

If you want 3 divs inside a page then you could go with the following solution

To have a page braek in every 3 div you have to use selector :nth-child(3n) to give 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>

To know more about more details about page-break go through this and this links

page-break-after / page-break-after property for div elements

1 Answers1