孤儿CSS:如何避免底页上的标题(h1,h2 ...)？

Question

我有一个带有标题(h1,h2,h3 ......)和段落的大型HTML文档.当我打印文档时,我希望自动将文档底部的标题转到下一页:

我能怎么做？我使用带有段落的"孤儿:3"CSS并使用"p"标签,但是使用h1或h2不起作用.

@page {
  size: A4;
}

p {
  orphans:3;
}

h1, h2 {
  orphans:3
}

关于行动的完整示例:

• 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设置是一个真正的工作草案,甚至基本的功能都没有得到广泛的支持(特别是Internet Explorer的10 呢).要解决此问题,您可以使用具有类似含义的其他属性:

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

请注意,这page-break-after适用于页面和列.page-break-afterFF没有得到很好的支持(这是一个bug)然后如果兼容性很重要且段落不会跨越多个页面,你可以解决包装<h1>和<p>容器内部(让我们说<section>),然后page-break-inside像这样应用:

section {
    page-break-inside: avoid;
}

IMO你应该结合page-break-after并page-break-inside使用page-break-inside具有-moz前缀,直到将修复这个bug.