修复列中的孤立标题

Question

我目前仍然遇到一个CSS打印问题，即打印没有孤立标题的列，如下例所示：

https://codepen.io/sjeannin/pen/wrXoRG

<div class="two-columns">
  <h1>Hello, Title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h1>Other title, world!</h1>
  <h2> Subtitle, world</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

.two-columns {
  column-count: 2;
}

h1, h2 {
  break-after: avoid;
}

我的目标是制作一张CSS表，用于使用Google Chrome无头打印结构良好，长达40页的文档。不幸的是，我在渲染的文档中遇到了孤儿：在前面的例子中，我更喜欢在第二列中包含第二个标题及其相关内容。

是否有CSS方法使这项工作？我应该转向我的文档代码中的自定义div，它会强制列跳转吗？

谢谢！

〜SPJ

Answer 1

使用：不是（X）选择器怎么样？选择除了第一个H1之外的所有H1在列之前中断？

h1:not(:first-child) {
  break-before: column;
}

Answer 2

我终于找到了一个在90％的情况下都有效的解决方案：

* + h2,* + h3,* + h4,* + h5,* + h6 {
    break-inside: avoid-column!important;
    break-after: avoid-column!important;
    page-break-inside: avoid!important;
    page-break-after: avoid!important;
    -webkit-column-break-inside: avoid!important;
    -webkit-column-break-after: avoid!important;
}
h2 + *, h3 + *, h4 + *, h5 + *, h6 + * {
    break-before: avoid-column!important;
    page-break-before: avoid!important;
    -webkit-column-break-before: avoid!important;
}
h1:not(:first-child) {
    break-before: column;
}

（这是一个临时解决方案，因为我知道它很简单，我仍然在寻找一种通用的方法来打印一个零h1-h6孤儿的PDF）

Answer 3

问题来自Google Chrome本身，我尝试使用Weasyprint，当我使用刚才编写的丑陋CSS时，它就像一个魅力！