Page break in HTML/CSS

While printing an html web page might require to display the specific content in different pages like below. The paragraph 1must be displayed on page1, paragraph 2 should move to page-2 and paragraph 3 should move to page-3. 

         <p> paragraph 1: some text here</p>
         <p> paragraph 2: some other text</p>
         <p>paragraph 3: some other extra text </p>

This would be more easier with the “page-break-before:always” or “page-break-after:always” properties which were there in the CSS from the CSS Version 2.0.
To move the above paragraphs into different pages by writing the style classes as below:

               <style>
                 .pageBreak{
                             page-break-after:always;
                }
               </style>
               <p class=” pageBreak”> paragraph 1: some text here</p>
               <p class=” pageBreak”> paragraph 2: some other text</p>
               <p>paragraph 3: some other extra text </p>

In place of above code, we can also write as below:

              <style>
               .pageBreak{
                   page-break-before:always;
                  }
               </style>
               <p> paragraph 1: some text here</p>
               <p class=” pageBreak”> paragraph 2: some other text</p>
               <p class=” pageBreak”>paragraph 3: some other extra text </p>

Sometimes the above may cause discrepancies while printing the page, So It would be more suggestible to use the media type above the style class as mentioned below:

                <style>
              @media print
                {
                     .pageBreak {page-break-after:always}
                 }
              </style>
              <p class=” pageBreak”> paragraph 1: some text here</p>
              <p class=” pageBreak”> paragraph 2: some other text</p>
              <p>paragraph 3: some other extra text </p>

The above paragraphs can also be written as below:

            <style>
            @media print
               {
                    .pageBreak
                  {
                      page-break-after:always;
                      page-break-before:always;
                  }
                }
            </style>
           <p> paragraph 1: some text here</p>
           <p class=” pageBreak”> paragraph 2: some other text</p>
           <p>paragraph 3: some other extra text </p>

Page break can be implemented dynamically by using the dom function as mentioned below:

            document.getElementById("someElementId").style.pageBreakAfter="always"; 

Limitations:

• The page-break styles work with the following block elements: BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, Hn, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, UL, XMP.
• Only applicable to Cascading Style Sheets 2 specification
• Only applicable to Internet Explorer 4.x and later at this stage - adding page breaks will not cause any ill effects on other browsers.
• Do NOT try and use within a table - they won't work. To make use of this functionality try to close the table and place the page break and open a new table and continue with it.