我正在尝试使用 window.print() 打印一个简单的引导页面。此页面看起来像这样(带有多个 div.col-md-12 和卡片):
<div class="overview"> <!-- Take all screen width -->
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">Test</div>
<div class="card-body">
<!-- Insert some long Lorel Ipsum text here -->
</div>
</div>
</div>
</div>
</div>
我想打印此页而不破坏那些 div.card。经过一番研究,我尝试了 StackOverflow 上找到的多种解决方案,但都没有成功。
<div class="card" style="page-break-inside:avoid;page-break-before:always;">
这不起作用(即使放置在外部 CSS 媒体打印中)。在 div.col-md-12 上使用这些 CSS 属性也不起作用。
任何想法 ?
我找到了解决方案。
为了确保 page-break-X 正常工作,您应该确保您的元素(和父元素)显示为块。将 display:block 添加到 .row、.col-md-12、.container(此处为 .overview)使 CSS 属性起作用。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)