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來隱藏其他人。