虽然目前不可能，但您仍然可以使用很棒的解决方法。
打印时，每页上仅自动复制三种元素：
- 具有固定位置的元素
- 标头，声明为@左上方 https://www.w3.org/TR/css-page-3/#margin-boxes, @顶部中心 https://www.w3.org/TR/css-page-3/#margin-boxes, @右上 https://www.w3.org/TR/css-page-3/#margin-boxes etc.
- 页脚，声明为@左下方 https://www.w3.org/TR/css-page-3/#margin-boxes etc.
我们必须使用其中之一来构建纯 CSS 解决方案：我们将选择标头。
所以，问题的第一部分是：如何为每个页面设置不同的标题？或者，换句话说，如何设置章节标题？
实现这个目标非常简单：一旦决定哪个标签或类应该包含章节标题，设置一个新的CSS 字符串 https://www.w3.org/TR/css-gcpm-3/#setting-named-strings-the-string-set-pro for it:
h1 {
string-set: doctitle content();
}
然后在标题中显示该字符串：
@page {
size: A4;
margin: 1.6cm .6cm 1.2cm .6cm;
@top-center {
content: string(doctitle);
}
}
现在你会得到这样的东西：
让我向您添加一些代码：
<html>
<body>
<h1>First section</h1>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p style="break-after: always;"></p>
<p>Lorem ipsum...</p>
<h1>Second section</h1>
<p>Lorem ipsum 2...</p>
<p>Lorem ipsum 2...</p>
<p>Lorem ipsum 2...</p>
<p>Lorem ipsum 2...</p>
<p style="break-after: always;"></p>
<p>Lorem ipsum 2...</p>
</body>
</html>
在这种情况下，您的标头将是：
- 第一页：“第一部分”
- 第二页：“第一部分”...然后将在同一页中开始第二部分，并带有他自己的标题
- 第三页：“第二部分”
下一步：为标题和章节标题设置相同的样式，因此标题可以与标题具有相同的外观：
h1 {
string-set: doctitle content();
font-family: 'Liberation Serif';
font-size: 28pt;
line-height: 1.2em;
}
@page {
size: A4;
margin: 1.6cm .6cm 1.2cm .6cm;
@top-left {
content: string(doctitle);
font-family: 'Liberation Serif';
font-size: 28pt;
line-height: 1.2em;
}
}
然后你会得到这样的东西：
现在，我们需要修复最新的问题：首页的标题看起来重复，因为标题和标题都存在。
修复它非常简单：
body h1:first-of-type {
position: absolute;
left: -30cm;
}
我已将第一个标题放置在打印区域之外。不幸的是设置为display: none会导致连标题都不会显示。您还有其他选择，例如visibility: hidden or font-size: 0 or color: transparent，但这三个选项总是会在标题和第一段之间留一些空白。
现在可能是时候增加标题的高度了，将顶部填充添加到@top-left；
结果应该是这样的：
这种技术并不是 100% 安全：如果不是第一章的章节碰巧在新页面中开始，则标题和标题都会显示，一个靠近另一个。无论如何，这种情况并不常见。
进一步的改进可以考虑采用不同的分页方法。
<html>
<body>
<section class="chapter">
<h1>First section</h1>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<h1>Second section</h1>
<p>Lorem ipsum 2...</p>
<p>Lorem ipsum 2...</p>
<p>Lorem ipsum 2...</p>
</section>
<section class="chapter">
<h1>Third section</h1>
<p>Lorem ipsum 3...</p>
<p>Lorem ipsum 3...</p>
<p>Lorem ipsum 3...</p>
<p>Lorem ipsum 3...</p>
</section>
</body>
</html>
设置章节分页符的样式，并管理任何章节第一个子项的标题隐藏：
section.chapter {
break-after: always;
}
section.chapter h1:first-of-type {
position: absolute;
left: -30cm;
}
