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 提供了 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 渲染机制的兼容性，是构建专业级页脚时比较稳妥的做法。