HTML/CSS 打印带浮动的分页符不起作用（例如：bootstrap）

Question

注意：自己提问和回答，因为我花了 3 天时间尝试不同的方法来找到解决方案，希望这对某人有所帮助。这个问题以前有人问过，但都是老问题，答案不明确或不令人满意。

尝试在使用具有浮动的元素打印时添加分页符，例如：使用 bootstrap 网格，不起作用。分页符被忽略。

<div style="float:right;">floating div</div>

<div class="col-xs-12">
  <div class="row">
    <div class="col-xs-12 break-after">
      Add page break after this element when printing
    </div>
    <div class="col-xs-12">
      This should be printed on next page
    </div>
  </div>
</div>

<style type="text/css">
.break-after {
  page-break-after: always;
}
</style>

Answer 1

首先，分页符在绝对定位的元素内不起作用，因此请确保您的分页符不在一个元素内。

现在，由于浮动导致分页符被忽略，我们需要清除浮动。

问题是，如果带 page-break-after: always; 的元素是浮点数（例如：bootstrap 中的 .col-xs-12），则 clear: both; 不起作用。

诀窍是在要添加页面的 div 之后添加 2 个新的 div 和 clear 和 page-break-打破：

<div class="page-break-clear"></div>
<div class="page-break">&nbsp;</div>

<style type="text/css">
.page-break-clear { 
  clear: both;
}
.page-break {
  page-break-after: always; /* depreciating, use break-after */
  break-after: page;
  height: 0px;
  display: block!important;
}
</style>

放在一起：

<div style="float:right;">floating div</div>

<div class="col-xs-12">
  <div class="row">
    <div class="col-xs-12 break-after">
      Add page break after this element when printing
    </div>
    <!-- These 2 new added divs will clear float and add the page break -->
    <div class="page-break-clear"></div>
    <div class="page-break">&nbsp;</div>

    <div class="col-xs-12">
      This should be printed on next page
    </div>
  </div>
</div>

<style type="text/css">
.page-break-clear { 
  clear: both;
}
.page-break {
  page-break-after: always; /* depreciating, use break-after */
  break-after: page;
  height: 0px;
  display: block!important;
}
</style>

作为旁注：我建议删除问题中提供的 page-break-after css for .break-after class 以防止在分页符上加倍以防花车被移除并且它确实有效。

此外，如果您正在使用 jquery 并且不想手动添加那两个分页符 div，为了让您的生活更轻松，只需运行以下代码这将在所有带有 class .break-after:

的元素之后自动添加它们

$('.break-after').after('<div class="page-break-clear"></div><div class="page-break">&nbsp;</div>');

HTML/CSS 打印带浮动的分页符不起作用（例如：bootstrap）

HTML/CSS printing page-break with float not working (eg: bootstrap)

html

css

printing

page-break

twitter-bootstrap