html - 底部页面上的孤儿 CSS : How avoid headers (h1, h2...)？

Question

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

我该怎么办？我使用带有段落的“orphans: 3”CSS 并使用“p”标签，但使用 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:always 因为我希望标题仅在出现在页面底部时转到下一页。

Answer 1

在排版中，孤儿是:

A paragraph-opening line that appears by itself at the bottom of a page or column, thus separated from the rest of the text.

但是在 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适用于页面和列。 page-break-after FF ( it is a bug ) 没有很好地支持，那么如果兼容性很重要并且段落不会跨越多个页面，您可以解决包装 <h1>和 <p>在容器内(假设 <section> )然后应用 page-break-inside像这样:

section {
    page-break-inside: avoid;
}

IMO 你应该结合 page-break-after和 page-break-inside使用 page-break-inside与 -moz前缀，直到它修复该错误。