使用 puppeteer 生成 PDF 时，“break-inside：避免”被忽略

Question

我正在使用 puppeteer v 5.2.1 从网页生成多页 PDF。

我使用以下命令来确保该块元素不会在分页符处被切断：

.wrapper {
    display: block;
    float: left;
    break-inside: avoid;
}

我已经使用 @page 设置了其他分页媒体内容，以查看 Puppeteer 可以处理分页媒体。

但我的块元素仍然被切断？

Pupetteer 正在模拟屏幕。尽管当它使用默认的打印仿真时，我得到了相同的结果。

我的设置中缺少什么吗？

Answer 1

好的，我已经解决了这个问题。

问题是我的 .wrapper 元素的容器元素是一个内联块。

包装器本身是块元素，因此它们遵循内部 CSS。但是，如果包含多个 .wrapper 元素的周围容器是内联块，则页面媒体 CSS 将其视为整体块，因此用户代理将选择在末尾分割此块。页面 - 不尊重它的块子级。

这是根据规范设计的： https://www.w3.org/TR/css-break-3/#end-block

.parent {
  display: block;
}

.wrapper {
  display: block;
  float: left;
  break-inside: avoid;
}

<div class="parent">
  <div class="wrapper">
    <div>Some content</div>
  </div>
  <div class="wrapper">
    <div>Some content</div>
  </div>
  <div class="wrapper">
    <div>Some content</div>
  </div>
</div>

在我最初的问题中，我的父母被错误地声明为

.parent {
  display: inline-block;
}