我正在使用CSS属性,
如果我使用page-break-after: always;=>它之前打印一个额外的空白页
如果我使用page-break-before: always;=>它之后打印一个额外的空白页.怎么避免这个？
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.print{
page-break-after: always;
}
</style>
<script type="text/javascript">
window.print();
</script>
</head>
<body>
<div class="print">fd</div>
<div class="print">fdfd</div>
</body>
</html>
gia*_*epp 95
你试过这个吗？
@media print {
html, body {
height: 99%;
}
}
AKX*_*AKX 63
你可以添加
.print:last-child {
page-break-after: auto;
}
所以最后一个print元素不会获得额外的分页符.
请注意,IE8中不支持:last-child选择器,如果你的目标是浏览器的那个坏蛋.
Mic*_*nov 37
这里描述的解决方案帮助了我(webarchive链接).
首先,您可以为所有元素添加边框,以查看导致新页面附加的原因(可能是一些边距,填充等).
div { border: 1px solid black;}
解决方案本身就是添加以下样式:
html, body { height: auto; }
小智 23
如果这些都不起作用,试试这个
@media print {
html, body {
height:100vh;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
}
}
确保它是100vh
display:none为所有其他不用于打印的元素设置。
设置visibility:hidden将使它们隐藏起来，但它们仍然在那里并为它们占用了空间。空白页面用于那些隐藏的元素。
如果您只想使用 CSS 并想避免分页，请使用
.print{
page-break-after: avoid;
}
看看分页媒体
您可以使用 pageBreakBefore 和 pageBreakAfter 的脚本等效项，动态分配它们的值。例如，您可以创建一个脚本来使其成为可选项，而不是对访问者强制自定义分页符。在这里，我将创建一个复选框，用于在页眉 (h2) 处的页面切片和打印机自行决定（默认）之间切换：
<form name="myform">
<input type="checkbox" name="mybox" onClick="breakeveryheader()">
</form>
<script type="text/javascript">
function breakeveryheader(){
var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto"
for (i=0; i<document.getElementsByTagName("H2").length; i++)
document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle
}
单击此处查看使用它的示例。您可以将脚本中的 H2 替换为另一个标记，例如 P 或 DIV。
http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml
小智 5
不知道（就目前而言）为什么，但这有帮助：
@media print {
html, body {
border: 1px solid white;
height: 99%;
page-break-after: avoid;
page-break-before: avoid;
}
}
希望有人能在解决问题的同时挽救他的头发......;）
我有一个类似的问题，但原因是因为我在页面底部有 40px 的边距，所以即使最后一页上有空间，最后一行也总是会换行。不是因为任何类型的page-break-*css 命令。我通过删除打印边距来修复，效果很好。只是想添加我的解决方案，以防其他人有类似的情况！
| 归档时间： |
|
| 查看次数： |
120039 次 |
| 最近记录： |