CSS page-break-inside 属性

对于需要分页显示的内容来说，如何控制页面分页十分重要。CSS3 中，提供了新的分页属性，page-break-* ，其中page-break-inside属性可以控制一个元素是否被分页。

一、page-break-inside 简介

page-break-inside 属性用于设置分页规则。如果希望元素不被分页，可以设置 page-break-inside: avoid。

  
    /*不分页*/
    .no-page-break{
        page-break-inside: avoid;
    }
  

如上所示，使用 page-break-inside: avoid即可实现不分页效果。

二、page-break-inside 的使用场景

page-break-inside 属性通常用于多列布局中，以及在表格中分页时。这里以多列布局来说明其使用场景。

假设要分别设置显示两个不同的 div 元素：第一个 div 不允许分页，第二个 div 允许分页，代码如下：

  
    .no-page-break {
        page-break-inside: avoid;
    }
    .page-break {
        page-break-inside: auto;
    }
  

HTML代码：

  
    
   
不允许分页内容
   
    
   
允许分页内容
   
  

如上，通过设置不同的 page-break-inside 值来实现两个 div 的不同的分页效果。

三、page-break-inside 的注意点

当设置 page-break-inside 属性时，其对应的父元素中的 page-break-inside 值也会被依次设置，除非有其他明确的page-break-inside设置。

可以通过CSS规则的继承性，将 page-break-inside 值从父元素传递到子元素，让整个树状结构都维持同样的分页方式。

四、page-break-inside 的兼容性

page-break-inside 属性在不同浏览器下的兼容性略有差异，但大多数现代浏览器都已经很好地支持了这个属性。

兼容性如下表所示：

五、总结

在进行页面分页处理时，往往需要控制一些元素不被分页，而CSS3中提供的page-break-inside属性可以很好地满足这个需求。而通过继承性，page-break-inside属性可以被很好地传递到所有的子元素中，达到整体统一的分页效果，是页面分页处理中一个非常实用的属性。