修正列中的孤立标题

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

我的目标是用谷歌Chrome无头打印一个结构良好、长达40页的文档的CSS表格。不幸的是，我在呈现的文档中遇到了一些孤儿:在前面的示例中，我更希望在第二列中有第二个标题及其相关的内容。

有没有一种CSS的方式来使这个工作？应该在文档代码中使用自定义div来强制列跳转吗？

谢谢!

~spj

Answer 1

最后，我提出了一种解决方案，适用于我的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;
}

(这是一个临时的解决方案，因为我知道它很难看，而且我仍然在寻找一种通用的方法来打印一个PDF和零h1-h6孤儿)。

Answer 2

使用:不是(X)选择器怎么样？选择除第一个在列之前中断的H1之外的所有？

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

Answer 3

问题来自谷歌Chrome本身，我尝试了Weasyprint，它的工作像一个魅力时，使用我刚才写的丑陋的CSS！