CSS如何样式化HTML页面，如打印预览

Question

我的问题是，我想对我的CSS页面进行样式设置，使其看起来像在“打印预览”中。我使用@media print CSS来制定打印规则。但我不知道如何设计我的HTML页面，例如：我将div大小设置为A4格式，但如果此div内的文本长度超过a4高度，我如何将div的某些部分移动到其他“a4”div ？

Answer 1

如果这个div内的文本长度超过a4高度，我该如何将div的某些部分移动到其他“a4”div？

您需要使用page-break在CSS使内容正确地执行了对页面。有两个属性可帮助您实现此目的：page-break-after，page-break-before,page-break-inside。 你可以参考MDN了解更多关于这方面的信息。

我不知道如何设计我的HTML页面。

确保您不使用position和float你的页面中。这是一个好方法。只保留那些需要的，并使用display: none来隐藏其他人。