时间戳

首页 > 解决方案 > Chrome 无法识别“break-after: Avoid”

css - Chrome 无法识别“break-after: Avoid”

问题描述

我正在使用带有 Chrome 79.0.3945.130 的 Windows 10。我有包含<h3>标签的 HTML 文档。打印时，我想避免在这些标签之后立即出现分页符。

防止分页符的自然方法似乎是使用 CSSbreak–after属性。而且我发现它可以在 Microsoft Edge 中使用。但我无法让它在 Chrome 或当前基于 Chromium 的 Edge 版本中运行。这是一个最小的例子：

<html>

  <head><title>Getting CSS page breaks to work</title></head>

  <body>

    <style>
      h3 { break-after: avoid; }
      .tall { 
        height: 9.5in;
        background-color: blue;
      }
    </style>

    <div class="tall"></div>

    <h3>Section heading</h3>
    <p>Lorem ipsum dolor.</p>

  </body>
</html>

当我在旧版本的 Edge (~v44) 中打印该文档时，它会按原样打印。但是当我在 Chrome 或当前版本的 Edgs (v83) 中打印时，<h3>页眉出现在页面底部，以下<p>文本出现在下一页顶部。打破和之间的页面<h3>是<p>我想要防止的。

我可以通过将<h3>和<p>标签都包装在一个 div 中并break–inside: avoid为该 div 设置来解决这个问题。但是这个解决方案并不令人满意：它是临时的，需要我首先确定所有出现不适当中断的情况。

我已经尝试了这里给出的示例的许多变体。例如，我尝试将 break-* 属性与::after选择器一起设置，如h3::after { break-after: avoid; }. 但是我还没有成功地防止分页符。

还有一些相关的帖子，例如：

  1. CSS 打印：避免页面之间的 DIV 被切成两半？
  2. page-break/webkit-region-break 不再在 chrome 中工作了？)

但是那里给出的建议对上面给出的例子没有帮助。

我还可以做些什么？

标签： cssgoogle-chromemicrosoft-edgechromiumpage-break

解决方案

推荐阅读