How to add Page Break dyanamically to Print page?
There is one long in the content on the print page, but while we print the some content of the text cut down.
alt text http://img694.imageshack.us/img694/6766/printpage.jpg
please let me know , if there is any dynamic way to add page-break css. th开发者_C百科e content could be any thing.
You might also just want to prevent page breaks inside an element.
E.g. short tables that you don't want to get ripped apart when printing:
@media print {
table {
page-break-inside: avoid;
}
}
As Haim Evgi referenced in this article http://davidwalsh.name/css-page-breaks
In addition to what's already described in the article, I would like to point out that it's good practice to use .page-break-before: auto instead of .page-break-before: always. The "auto" will break the page only if the contents are at the end if the page, this will prevent breaking the page and leaving a lot of blank space.
The CSS
@media all {
.page-break { display: none; }
}
@media print {
.page-break { display: block; page-break-before: auto; }
}
The HTML
<div>some content</div>
<div class="page-break">more content, this content may be short or long</div>
<div class="page-break">this content may page-break if content above this <div> is at the end of the page</div>
<div class="page-break">etc,..</div>
Use the css page-break-before and page-break-after elements.
精彩评论