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）精准控制样式。
以下为推荐实现方案：
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
<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 渲染兼容性，是构建专业级页脚的标准实践。
