Paged.js页脚边距盒实现多行内容含页码换行

Paged.js 的 margin box 在处理 CSS content 时，有个小坑：它不识别 \A 或 \n 这类换行符。但问题总有解法——通过 running element 配合伪元素 ::after 和
，就能实现带样式的多行页脚。比如，你想在页脚里放一句“斜体加粗的提示语”，下面紧接着跟上动态页码，这套方案就能搞定。

企业级文档生成中的页脚需求

在企业级文档生成场景中，页脚常常需要承载结构化信息。比如，页脚上方显示一行强调文本（例如 VERIFY REVISION BEFORE USE），下方再跟上动态页码（Page x of y）。但问题来了——CSS content 属性在 @bottom-center 这类 margin box 中，根本不认 \A 或 \n 为换行符。直接拼接字符串，所有内容会挤在同一行，而且也没办法单独控制某一部分的字体样式。

Paged.js 页脚换行问题的核心解法

好在 Paged.js 提供了 position: running() 机制，搭配 HTML 结构和伪元素，可以优雅地绕过这个限制。核心思路并不复杂：

• 先把整个页脚定义为一个 running 元素；
• 用
显式控制换行位置；
• 通过 ::after 伪元素注入动态计数器（counter(page) / counter(pages)），避免污染主 DOM 内容；
• 再借助子元素选择器（比如 >:first-child / >:last-child）来精准控制样式。

推荐实现方案

  VERIFY REVISION BEFORE USE
  

   

关键注意事项

• 
是必需的显式换行符，不能省略；
• .footnote > *:last-child::after 中的 > 确保只作用于直接子元素，避免嵌套干扰；
• @page { margin-bottom } 的值必须大于等于页脚内容的实际高度（建议从 0.8in 起步），否则 element(footRunning) 可能溢出页面底部而被截断；
• counter(pages) 在首次渲染时可能显示为 0，需要确保文档至少包含一页内容，并完成完整的分页计算（Paged.js 默认支持）；
• 如果需要两行内容居中对齐，可以给 .footnote 添加 text-align: center，同时确保 保持内联元素（默认行为）。

方案优势总结

这个方案兼顾了语义清晰、样式可控以及与 Paged.js 渲染机制的兼容性，是构建专业级页脚时比较稳妥的做法。