How to avoid splitting DIV in HTML across pages

Question

Below is my code:

<!DOCTYPE html>
<html>
<head>
<style>
    @media print
    {
      .page-break  { display:block; page-break-inside: avoid;}
    }

} 
</style>    
</head>
<body>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>---------------------------------------------------------.</p>
<div class="page-break">
  <p>This is some text in a div element.</p>
  <p>This is some text in a div element.</p>
  <p>This is some text in a div element.</p>
  <p>This is some text in a div element.</p>
  <p>This is some text in a div element.</p>
  <p>This is some text in a div element.</p>
  <p>This is some text in a div element.</p>
  <p>This is some text in a div element.</p>
</div>

<p>This is After div..........................</p>

</body>
</html>

I want to display my DIV freshly if it is split into 2 pages ONLY. I used above code but not working in print preview.

Possible duplicate of: https://stackoverflow.com/questions/2649169/print-styles-how-to-ensure-image-doesnt-span-a-page-break — BugsArePeopleToo, Mar 28 '19 at 14:30

score 5 · Answer 1 · answered Mar 28 '19 at 14:47

I suggest using divs as page containers like this:

<div class="page">
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    ...
</div>
<div class="page">
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    ...
</div>

That way, pages can be manipulated in whatever way you see fit.

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

Div elements are already display:block by default so you can skip that style in most cases.

How to avoid splitting DIV in HTML across pages

1 Answers1