在印刷术中，孤儿是：
在一页或一栏的底部单独出现的一段开始行，因此与正文的其余部分分开。
然而在HTML中<h1>和<p>是不同的 * 段落 *，那么你必须使用的是break-after属性来告诉布局引擎不要在该段落之后放置分页符（副作用是将下一段移动到上一页-如果合适-或者将标题移动到下一页。

h1, h2 {
    break-after: avoid-page;
}

关于兼容性的说明：break-after设置是一个真正的工作草案，甚至基本的功能都没有得到广泛支持（特别是Internet Explorer 10做）。要解决此问题，您可以使用另一个具有类似含义的属性：

h1, h2 {
    page-break-after: avoid;
}

请注意，page-break-after适用于页和列。FF（it is a bug）不太支持page-break-after，如果兼容性很重要，段落不会跨越多个页面，您可以将<h1>和<p> Package 在容器中（假设为<section>），然后像这样应用page-break-inside：

section {
    page-break-inside: avoid;
}

在我看来，你应该使用page-break-inside和-moz前缀来组合page-break-after和page-break-inside，直到它修复这个bug。

这个问题是这个老问题的重复：How do I avoid a page break immediately after a heading
最好的解决方案是这样的代码：

h1, h2, h3, h4, h5 {
  break-inside: avoid;
}
h1::after, h2::after, h3::after, h4::after, h5::after {
  content: "";
  display: block;
  margin-bottom: -4rem;
  height: 4rem;
}