修复列中的孤立标题答案

【问题标题】：Fix orphan titles in columns修复列中的孤立标题
【发布时间】：2017-10-12 01:48:04
【问题描述】：

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

<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

【问题讨论】：

标签： css google-chrome printing

【解决方案1】：

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

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

【讨论】：

这是一个非常好的开始！我现在尝试为所有 h1-6 提供通用解决方案 :)

【解决方案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）

【讨论】：

【解决方案3】：

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

【讨论】：