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是一个非常有用的属性。它可以控制元素是否需要分页，使得我们能够更加控制输出的内容，使得打印输出的效果更佳美观和可读性。