3

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?

Çağın ARSLAN
  • 31
  • 2
  • Just create a `
    ` with a width of `2480px`. The content inside should break by itself.
     – Koby Douek Aug 24 '17 at 12:55
  • Have you tried anything yet? – Script47 Aug 24 '17 at 12:56
  • [`page-break-after`](https://www.w3schools.com/cssref/pr_print_pageba.asp), [`page-break-before`](https://www.w3schools.com/cssref/pr_print_pagebb.asp) and [`page-break-avoid`](https://www.w3schools.com/cssref/pr_print_pagebi.asp) *may* come in handy. – Script47 Aug 24 '17 at 12:59
  • Check [this](https://stackoverflow.com/questions/3341485/how-to-make-a-html-page-in-a4-paper-size-pages) out too. – Script47 Aug 24 '17 at 13:00

1 Answers1

1

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>
Ehsan
  • 12,655
  • 3
  • 25
  • 44