如何通过CSS实现HTML打印时章节从奇数页开始？

完全可以用CSS的分页控制属性解决这个问题，无需手动插入空白页或计算行数，完美适配动态文本的内容变化：

核心CSS规则 #

1. 强制章节从奇数页启动
   给每个章节的容器元素添加以下样式：

.chapter {
  page-break-before: right;
}

right属性值会强制章节从书籍的右侧页（即奇数页）开始。如果上一章结束在奇数页，浏览器或PDF生成工具会自动插入一个空白的偶数页，确保当前章节从下一个奇数页起始。

2. 文档末尾自动补空白页
   如果最后一章结束在奇数页，需要自动补充空白页来维持后续章节的奇数页起始规则。可以通过伪元素实现兜底：

body:after {
  content: "";
  display: block;
  page-break-before: right;
  height: 0;
  visibility: hidden;
}

这个伪元素会在文档末尾触发奇数页检查，若当前为奇数页则自动插入空白页。

补充优化 #

• 避免内容被截断：如果不想章节内的标题、段落被分页截断，可添加：

.chapter h1, .chapter p {
  page-break-inside: avoid;
}

• 兼容性说明：现代浏览器（Chrome、Firefox、Edge）的打印功能，以及专业PDF生成工具（如PrinceXML、WeasyPrint）都能良好支持上述分页属性，旧版IE的兼容问题可忽略。

不推荐的替代方案 #

若遇到特定工具不兼容CSS分页的极端情况，也可尝试用JavaScript动态计算打印页数，但这种方法依赖浏览器打印预览API，稳定性远不如CSS方案，一般不建议使用。

内容的提问来源于stack exchange，提问作者Lance Pollard