CODEWITHSUNDEEP
cssprinting
user326096
user326096

Reputation: 307

Printing CSS and Page Breaks

I want to insert a page break when users print my web page.

IE 7, Mozilla 3.0 , any Chrome

Upvotes: 4

Views: 5189

Answers (3)

Niloofar
Niloofar

Reputation: 21

Although most Internet users prefer to read web pages online, some of your users might want to print the article text and then read it.

With CSS, you can control the location of broken pages and go to the next page when printing. Just add the following CSS code to your styles, and then assign the page-break class to each tag you want to print on the next page.

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

Upvotes: 0

J.Ray
J.Ray

Reputation: 161

I have only had to do this once, but this worked just fine in IE7/IE8. Not sure about Chrome or Firefox though.

<div>This is before the page break.</div>
<div style="page-break-after:always;"></div>
<div>This is after the page break.</div>

Upvotes: 0

John Parker
John Parker

Reputation: 54445

You can use the CSS page-break-before or page-break-after properties in a print media style sheet to achieve this.

For example:

<style>
    @media print {
        table {
            page-break-after: always;
        }
    }
</style>

Upvotes: 8

Related Questions