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

Question

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

感谢您的帮助！ - 迈克尔

Answer 1

问题是，页面中断，其本质只是在基于打印的设置中有意义。但是，假设您希望显示它们，只需将'page-break-before'等css应用于div，然后仅对于屏幕使用div（例如）虚线样式。对于打印样式，只是哈德虚线和分页符将正确呈现...

例如：

HTML

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

CSS（屏幕）

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

CSS （print）

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

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