如何在 Paged.js 页脚边距盒内实现多行内容（含页码与换行）

Paged.js 的 margin box 不支持 CSS content 中的 A 换行符，但可通过 running element + 伪元素 ::after 结合 <br> 实现带样式的多行页脚，如“斜体加粗提示语+换行+动态页码”。

paged.js 的 margin box 不支持 css `content` 中的 `a` 换行符，但可通过 running element + 伪元素 `::after` 结合 `
` 实现带样式的多行页脚，如“斜体加粗提示语+换行+动态页码”。

在使用 Paged.js 生成符合企业规范的分页文档时，常需在页脚区域展示结构化信息——例如包含强调文本（如 VERIFY REVISION BEFORE USE）与动态页码（Page x of y）的两行内容。遗憾的是，CSS content 属性在 @bottom-center 等 margin box 中不解析 A 或 n 为换行，直接拼接字符串会导致所有内容挤在同一行，且无法对其中某一部分单独设置字体样式。

所幸，Paged.js 支持 position: running() 机制，配合 HTML 结构与伪元素，可优雅解决该问题。核心思路是：
✅ 将页脚整体设为 running 元素；
✅ 使用 <br> 显式控制换行位置；
✅ 利用 ::after 伪元素注入动态计数器（counter(page) / counter(pages)），避免污染主 DOM 内容；
✅ 通过子元素选择器（如 >:first-child / >:last-child）精准控制样式。

以下为推荐实现方案：

<style>  @page {    margin-bottom: 1in; /* 必须预留足够底部边距，否则页码可能被裁剪 */    @bottom-center {      content: element(footRunning); /* 引用 running 元素 */    }  }  .footnote {    position: running(footRunning); /* 声明为 running 元素 */    font-size: 12px;    line-height: 1.4;  }  .footnote > *:first-child {    font-style: italic;    font-weight: bold;  }  .footnote > *:last-child::after {    content: "Page " counter(page) " of " counter(pages);  }</style><!-- 文档任意位置（通常放在 body 底部，确保全局生效） --><div class="footnote">  <span>VERIFY REVISION BEFORE USE</span>  <br>  <span></span> <!-- 此空 span 作为 ::after 的宿主，承载页码 --></div>

? 关键注意事项：

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

该方案兼顾语义清晰性、样式可控性与 Paged.js 渲染兼容性，是构建专业级页脚的标准实践。