我只是喜欢将.wp_left_col
div
下的divs
放在单独的页面中。这是我的css代码。
.wpi_left_col > div {
page-break-after: always !important;
page-break-inside: avoid !important;
}
它可以在Firefox上运行。为什么它不能在Google Chrome上工作?
发布于 2013-12-14 01:01:01
因此,在经历了一些挫折之后,我找到了一个解决方案。这是一个黑客攻击,但是Chrome不支持正确的分页符,所以..您必须将所有父元素设置为显式浮动: none。在本例中,我将打印选项卡式内容。
<body>
<main role="main">
<section class="tabs">
<div class="tabbed-content">
<div class="tab">print page 1</div>
<div class="tab">print page 2</div>
<div class="tab">print page 3</div>
</div>
</section>
</main>
</body>
那么你的CSS看起来就像这样。
html, body, .main-content, .tabs, .tabbed-content { float: none; }
.tab {
display: block; /* unhide all tabs */
break-before: always;
page-break-before: always;
}
发布于 2014-07-18 04:48:20
时间是2014年7月,到今天为止,使用的是float: none;对于所有的父元素,这对我来说是有效的:
@media print {
table {float: none !important; }
div { float: none !important; }
.page-break { page-break-inside: avoid; page-break-before: always; }
.dont-print { display: none; }
}
这个解决方案适用于Firefox、Chrome和Safari。因为我使用的是Bootstrap,所以这里有!important,而bootstrap在div上做了一个浮点操作: left。
发布于 2016-02-02 21:03:34
3年后,针对div
的float:none !important
成为了在chrome中实现中断的解决方案。不需要float:none
所有父级(body
或html
)
@media print {
div {
float: none !important;
}
}
https://stackoverflow.com/questions/14303178
复制相似问题