Javascript 如何动态地将分页符添加到打印页面?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/2332100/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add Page Break dyanamically to Print page?
提问by Wasim Shaikh
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
替代文字 http://img694.imageshack.us/img694/6766/printpage.jpg
please let me know , if there is any dynamic way to add page-break css. the content could be any thing.
请让我知道,如果有任何动态方式来添加分页 css。内容可以是任何东西。
回答by Michael Berrios
As Haim Evgi referenced in this article http://davidwalsh.name/css-page-breaks
正如本文中引用的 Haim Evgi 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.
除了文章中已经描述的内容之外,我想指出使用 .page-break-before: auto 而不是 .page-break-before: always 的好习惯。只有当内容在页面末尾时,“自动”才会打破页面,这将防止打破页面并留下大量空白。
The CSS
CSS
@media all {
.page-break { display: none; }
}
@media print {
.page-break { display: block; page-break-before: auto; }
}
The HTML
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>
回答by A.J.Bauer
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;
}
}
回答by bkaid
Use the css page-break-before and page-break-after elements.
使用 css page-break-before 和 page-break-after 元素。

