孤儿CSS：如何避免底页上的标题（h1，h2 ...）？

Question

我有一个包含标题（h1，h2，h3 ...）和段落的大型HTML文档。当我打印文档时，我希望自动将文档底部的标题转到下一页：

我该怎么办？我使用＆＃34;孤儿：3＆＃34;带有段落的CSS和用于＆＃34; p＆＃34;标签，但h1或h2不起作用。

@page {
  size: A4;
}

p {
  orphans:3;
}

h1, h2 {
  orphans:3
}

Full example on action其中：

• 1-2页：段落孤儿工作正常。
• 2-3页：标题不起作用。

要求：

• HTML有一个主div容器。
• 不要改变HTML 。
• 浏览器支持并不重要（在我的特定工作中）。
• 我需要CSS中的一些技巧（最好没有JS或Jquery）
• 我无法使用page-break-before：总是因为我希望这些标题只在页面底部显示时才转到下一页。

Answer 1

在排版中，孤儿是：

  

段落打开行，它自身显示在页面或列的底部，因此与文本的其余部分分开。

但是，在HTML <h1>和<p>中有不同的段落，那么您必须使用break-after属性来告诉布局引擎不要放置页面在该段落之后中断（副作用将下一段移至上一页 - 如果适合 - 或将标题移至下一页。

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

关于兼容性的注意事项：break-after设置是 true 工作草案，甚至基本功能也不受广泛支持（特别是Internet Explorer 10 ）。要解决此问题，您可以使用具有类似含义的其他属性：

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

请注意，page-break-after适用于页面和列。 FF（it is a bug）不支持page-break-after，如果兼容性很重要并且段落不会跨越多个页面，您可以解决在<h1>和<p>内的问题。容器（比方说<section>）然后像这样应用page-break-inside：

section {
    page-break-inside: avoid;
}

IMO您应该page-break-after和page-break-inside使用page-break-inside -moz前缀，直到它能解决该错误。