分页符在 Bootstrap 模式下不起作用

Posted 2023-03-06

【中文标题】分页符在 Bootstrap 模式下不起作用

【英文标题】：Page-break not working in Bootstrap modal

【发布时间】：2018-10-25 06:42:09

【问题描述】：

我使用的是 Bootstrap (v4) 模态，模态中有多个部分。我想打印模态正文的内容并在新页面上开始每个部分。我自然会使用以下 CSS：

section 
    page-break-after: always; 

我尝试了很多方法，但似乎无法让分页符在模态中工作。我制作了一个example in codepen 来展示我试图实现的目标。 真的很感激一些帮助。提前致谢！

html：

<div class="modal-body do-print">
  <section>
    <h1>Page 1</h1>
    <p>
      content
    </p>
  </section>
  <section>
    <h1>Page 2</h1>
    <p>
      content
    </p>
  </section>
</div>

CSS：

section 
    page-break-after: always !important;
    margin: 40px;

https://codepen.io/pen/deqyvq

【参考方案1】：

根据“page-break-after”规则，它不适用于绝对定位元素。 请检查以下代码 -

  #printSection 
    position:absolute; // Remove this and it will work
    left:0;
    top:0;
  

谢谢，