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

Question

我在打印 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中完成吗？

Answer 1

这是一个 hack，但 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;
}

Answer 2

请注意要使分页符正常工作，div 不应有任何浮动！

因此，如果您的 div 说 float:left ，请将其重置为 print saying: float: none ，这将使分页符再次工作。

Answer 3

我在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;
}

Answer 4

它不应该在 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>

Answer 5

在我的例子中，我有按钮行，我想用第 3 个按钮分成 2 行，所以我使用了这个

button:nth-of-type(3) {
   page-break-after: right;
}

但这不适用于 chrome，因为它是 flex（我认为）

所以我使用这样的网格作为替代方案

.partent-class-options {
   display:grid;
   grid-template-columns: 1fr 1fr 1fr;
}

这只是替代，但不像 break-after 那样准确如您所知，这不适用于第一行包含 3 个选项而第二行包含超过 3 个选项的模式 ✌️

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

page-break-after does not work in Chrome

html

css

google-chrome

page-break