page-break-before和page-break-after 實現分頁打印

page-break-before和page-break-after CSS屬性並不會修改網頁在屏幕上的顯示,這兩個屬性是用來控制文件的打印方式。每個打印屬性都可以設定4種設定值:auto、always、left和right。其中Auto是默認值,只有在有需要時,才需設定分頁符號 (Page breaks)。page-break-before若設定成always,則是在遇到特定的組件時,打印機會重新開始一個新的打印頁。page-break-before若設定成left,則會插入分頁符號,直到指定的組件出現在一個左邊的空白頁上。page-break-before若設定成right,則會插入分頁符號,直到指定的組件出現在一個右邊的空白頁上。page-break-after屬性會將分頁符號加在指定組件後,而非之前。在下列

程序中您將可以看到這些屬性的設定:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>This is the first div.</div>
  <div STYLE="page-break-before:always">This is the second div.</div>
  <div STYLE="page-break-after:always">This is the third div.</div>
  <div>This is the fourth div.</div>
  <div STYLE="page-break-before:right">This is the fifth div.</div>
  <div STYLE="page-break-after:right">This is the sixth div.</div>
  <div>This is the last div.</div>
</body>
</html>

可用值

描述
auto Insert a page break after the element if necessary
假如需要在對象之後插入頁分割符
always Insert a page break after the element
始終在對象之後插入頁分割符
avoid Avoid inserting a page break after the element
避免在對象後面插入頁分割符
left Insert page breaks after the element until it reaches a blank left page
在對象後面插入頁分割符直到它到達一個空白的左頁邊
right Insert page breaks after the element until it reaches a blank right page
在對象後面插入頁分割符直到它到達一個空白的右頁邊

轉載地址:http://blog.163.com/fan_yishan/blog/static/4769221320091043619358/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章