修复孤儿冠军

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表格，用于打印结构合理，长达40页的使用Google Chrome浏览器的无头文档。不幸的是，我在呈现文档中陷入了孤儿的困境：在前面的例子中，我更喜欢在第二列中有第二个标题及其关联的内容。

有没有一种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

如何使用：not（X）selector？在列之前选择除了第一个H1之外的全部内容？

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

Answer 3

问题来自谷歌浏览器本身，我尝试了Weasyprint，它使用我刚刚写的丑陋的CSS时，就像一个魅力！