如何在Paged.js边距盒中实现换行并添加页码？

方法1：在Running Element中嵌入页码（推荐，支持不同样式） #

这种方法延续你最初的running-element思路，通过CSS伪元素插入页码并实现换行，同时能分别控制两行的样式，完全匹配需求：

@page {
  @bottom-center {
    content: element(footRunning);
    text-align: center; /* 确保整个中心区域内容居中 */
  }
}

.foot-center {
  position: running(footRunning);
  font-style: italic;
  font-weight: bold;
  display: block;
}

/* 通过伪元素添加页码，设置换行和独立样式 */
.foot-center::after {
  content: "\A Page " counter(page) " / " counter(pages);
  white-space: pre; /* 关键：让转义字符\A识别为换行 */
  font-style: normal; /* 取消页码的斜体 */
  font-weight: normal; /* 取消页码的加粗 */
  margin-top: 4px; /* 可选：调整两行间距 */
}

对应的HTML只需保留running元素：

<span class="foot-center">VERIFY REVISION BEFORE USE</span>

方法2：直接在content属性中实现换行（仅两行样式相同时适用） #

如果页码也需要和第一行保持相同的斜体加粗样式，可直接给边距盒设置white-space: pre来让\A换行符生效：

@page {
  @bottom-center {
    content: "VERIFY REVISION BEFORE USE\A Page " counter(page) " / " counter(pages);
    white-space: pre; /* 启用换行符解析 */
    text-align: center;
    font-style: italic;
    font-weight: bold;
  }
}

关键说明 #

• \A是CSS content中的换行转义字符，默认会被忽略，必须配合white-space: pre或white-space: pre-line才能生效；
• Paged.js原生支持在running元素中使用counter(page)和counter(pages)计数器，无需额外配置。

内容的提问来源于stack exchange，提问作者Cardinal System