17

我有一个带有标题（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:always 因为我希望标题仅在出现在页面底部时才进入下一页。
4

1 回答 1

15

在排版中，孤儿是：

单独出现在页面或列底部的段落开头行，因此与文本的其余部分分开。

但是在 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 没有很好地支持（这是一个错误），那么如果兼容性很重要并且段落不会跨越多个页面，您可以解决包装<h1>和<p>容器内部的问题（比如说<section>），然后page-break-inside像这样应用：

section {
    page-break-inside: avoid;
}

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

于 2016-01-15T10:46:09.897 回答