我可以在 Paged.js 边距框中使用换行符吗？

Question

我正在使用 Paged.js 生成文档。根据公司政策，文档每页必须有页脚，如下所示：

QFxxx '	使用前验证修订版 第 x / x 页	月/日/年 '

我很难将“验证修订...”和页码放在同一个页边距框中。我的第一次尝试是使用 running-elements，因为“验证...”需要粗体和斜体：

<style>
    @page {
        @bottom-center {
            content: element(footRunning);
        }
    }

    .foot-center {
        position: running(footRunning);
        font-style: italic;
        font-weight: bold;
    }
</style>

<!-- ... -->

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

就定位和样式而言，这有效，但我不知道如何添加页码。我想看看单独使用

content

是否至少可以实现换行（灵感）：

@bottom-center {
    content: "VERIFY REVISION BEFORE USE\APage " counter(page) " of " counter(pages);   
}

然而，这并没有换行，只是用空格替换了

\A

。

有没有办法在

content

属性 OR 中添加换行符来列出运行元素中的页码？

Answer 1

因此，对于遇到同样问题的任何人来说，我发现使用容器并为生成的内容（即页码）添加带有

after

伪元素的子元素效果很好：

<style>
    @page {
        margin-bottom: 1in;

        @bottom-center {
            content: element(footRunning);
        }
    }

    .footnote {
        position: running(footRunning);
    }

    .footnote>*:first-child {
        font-style: italic;
        font-weight: bold;
    }

    .footnote>*:last-child::after {
        content: "Page " counter(page) " of " counter(pages);
    }
</style>

<!-- ... -->

<div class="footnote">
    <span>VERIFY REVISION BEFORE USE</span>
    <br>
    <span></span>
</div>

确保测试页边距，否则页码会超出页面底部。