CODEWITHSUNDEEP
javascripthtmlcssprinting
Çağın ARSLAN
Çağın ARSLAN

Reputation: 31

How to add auto detect page break

I have created a web page to show billing details. Some of the bills have lots of details and if this bill's details do not to fit into an A4 sheet of paper I want to add a page break. How can I detect that automatically, should I add a page break?

Upvotes: 3

Views: 2310

Answers (1)

Ehsan
Ehsan

Reputation: 12959

page-break-before : Specifies whether a new page should be started before a particular element.

page-break-after : Specifies how to handle page breaks after a particular element.

always : Force a page break before or after the specified element

Insert .header(or other name) and .footer(or other name) between content to website,like this:

<div class="header"></div>
...content...
<div class="footer"></div>

<div class="header"></div>
...content...
<div class="footer"></div>

after it use :

.header {
  page-break-before:always;
}

.footer {
  page-break-after:always;
}


.header, .footer {
  display: none;
}

@media print {

.header, .footer {
  display: block;
}
  .header {
    page-break-before:always;
  }

  .footer {
    page-break-after:always;
  }
}
<div class="header"></div>
<p>...content...</p>
<div class="footer"></div>

<div class="header"></div>
<p>...content...</p>
<div class="footer"></div>

Upvotes: 1

Related Questions