Page break in CSS or Javascript

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.