CSS Page Break After

一、Page Break After是什麼？

Page Break After屬性是CSS3中的屬性之一，它用來控制在列印輸出時，元素後面是否要強制換行成新的一頁。

該屬性可用於各種HTML元素，如段落、列表、表格、圖片等。默認情況下，Page Break After屬性不是長時的，因此在列印輸出中不會自動分頁。因此，需要通過設置該屬性來實現列印輸出的正確分頁。

二、如何使用Page Break After屬性？

Page Break After屬性的使用非常簡單，只需要為元素設置相應的屬性值即可。

/*簡寫形式*/
page-break-after: auto|always|avoid|left|right|initial|inherit;

/*具體屬性值*/
page-break-after: auto; /*默認值，元素不強制換頁*/
page-break-after: always;/*元素後面強制添加一個新的頁面*/
page-break-after: avoid;/*元素不允許被分在兩個頁面之間*/
page-break-after: left;/*元素後面強制添加一個新的頁面，且新頁面緊貼在左側*/
page-break-after: right;/*元素後面強制添加一個新的頁面，且新頁面緊貼在右側*/
page-break-after: initial;/*重置為默認值*/
page-break-after: inherit;/*繼承父元素的Page Break After值*/

三、應用實例

例1：段落切成兩頁

p {
  page-break-after: always;
}

這是第一頁的內容
這是第二頁的內容

例2：對於列表中的條目如何換頁

li {
  page-break-after: always;
}


  
這是第一頁的第一條目
  
這是第一頁的第二條目
  
這是第一頁的第三條目
  
這是將在第二頁的第一條目
  
這是將在第二頁的第二條目
  

例3：表格不允許分割在一頁內

table {
  page-break-inside: avoid;
}


  

    

      
姓名
      
年齡
      
地址
    
  
  

    

      
張三
      
25
      
北京市海淀區
    
    

      
李四
      
28
      
上海市浦東區
    
    

      
王五
      
30
      
深圳市南山區
    
  

四、總結

在列印輸出方面，Page Break After是一個非常有用的屬性。它可以控制元素是否需要分頁，使得我們能夠更加控制輸出的內容，使得列印輸出的效果更佳美觀和可讀性。