CSS - 如何在屏幕上显示分页符？

Question

据我所知，您目前可以使用page-break-before和page-break-after让浏览器将媒体解释为分页符，但我想知道是否可以实际在网页上呈现这些内容，例如我网站内的打印预览。

感谢您的帮助！ - 迈克尔

Answer 1

问题在于分页符本质上只在基于打印的设置中有意义。但是，假设您希望它们显示出来，只需应用“之前的分页”＆＃39; css到div然后，仅用于屏幕，用（例如）虚线划分的样式。对于打印样式，只需使用虚线，分页符就能正常呈现......

例如：

HTML

<div class="myPageBreak"></div>

CSS（屏幕）

.myPageBreak{
    margin: 10px 0 0 0;
    padding: 10px 0;
    border-top: 1px dotted #c5c5c5;
}

CSS（打印）

.myPageBreak{
    page-break-before: always;
    padding: 0;
    margin: 0;
    border: none;
}

这应该会产生一个分页符＆＃39; div为20px深度，1px，屏幕中间有灰色虚线。打印时，线条，填充和边框不会显示。