page-break-after在Chrome中不起作用

时间:2016-03-08 15:29:46

标签: html css google-chrome page-break

我在打印过程中在Google Chrome中遇到page-break-after问题。它似乎无法正常工作。我试过Firefox,它就可以了。我的代码是:

<div style="position: relative; display: block;">

    <div style="display: block; page-break-after: always; position: relative;">Page 1</div>

    <div style="display: block; position: relative; page-break-before:always;">Page 2</div>

</div>

有什么技巧可以在Chrome中完成吗?

4 个答案:

答案 0 :(得分:7)

这是一个黑客,但Chrome不支持分页。所以试着改用它:

<body>
    <main role="main">
        <section class="tabs">
            <div class="tabbed-content">
                <div class="break-after">Page 1</div>
                <div class="break-before">Page 2</div>
            </div>
        </section>
    </main>
</body>

并将此添加到您的css:

html, body, .main, .tabs, .tabbed-content { float: none; }

.break-after {
    display: block;
    page-break-after: always;
    position: relative;
}

.break-before {
    display: block;
    page-break-before: always;
    position: relative;
}

答案 1 :(得分:2)

请注意要使用分页符,div应该没有浮点数!

因此,如果您的div说出float:left,则将其重置为print并显示:float:none,它将使分页符再次起作用。

答案 2 :(得分:1)

它不应该在 flex div 内。 如果是,除非关闭 flex div,否则分页符不起作用。

例如:

   <div class="row">
           //bla bla    
   </div>/*close old flex div*/
    <div class="col-12 p-0 display-block break-before"></div>
    <div class="row">/*new flex div*/
              //bla bla
    </div>
    <style>
    .break-before {
        display: block;
        position: relative;
        page-break-before: always !important;   
    }
    </style>

答案 3 :(得分:0)

2019年10月,我无法获得以前的答案才能在Chrome中工作。现在看来,必须使用break-before: page而不是break-before: always

这在FF中也有效,但以前的答案也是如此。

<div>
  <div class="break-before">
    Page 1
  </div>
  <div class="break-before">
    Page 2
  </div>
</div>
.break-before {
  break-before: page;
}