У меня есть несколько компонентов, которые выглядят так:
@media print {
.print-wrapper {
page-break-inside: avoid;
display: inline-block;
}
}
<div class="print-wrapper">
<div data-appear-animation="fadeInRightBig" class="card animated fadeInRightBig mb-5 benchmarkCard"> <div role="tab" id="heading6" class="card-header">
<a data-toggle="collapse" href="#remarketingUtilization" aria-expanded="true" aria-controls="remarketingUtilization" class="collapsed">
<i aria-hidden="true" class="fa fa-refresh"></i>
<strong class="adwords-category">Remarketing Utilization</strong>
<span class="pull-right total-score">
14%
</span>
</a>
</div>
<div id="remarketingUtilization" role="tabpanel" aria-labelledby="headingThree" class="collapse show">
<div class="card-block p-4">
<div class="row">
<div class="col-md-12">
There are just 3 ways you can grow your business. By generating more Traffic,increasing
your Conversion Rate and optimizing Customer Value. But getting traffic
is easy... what will set you apart from the rest is building sustainable customer
relationships. Trust, relevance and user experience are the main ingredients
to achieve exactly that. Dasbot will assist you on all 3 growth levers. For instance, when
the Page Speed of your landing pages is slow, Dasbot will help you
optimize page load time.
<div class="btn-wrapper">
<button class="btn btn-outline mt-4 btn-compare">See
how you compare
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
в моем файле print.scss я говорю, что карты page-break-inside следует избегать:
.card {
page-break-inside: avoid;
}
Но это приводит к выводу в печати:
