[分享]css内容分两页显示

CSS是一种常用的网页样式设计语言，在设计过程中有时需要将页面的内容分成两页来显示，这时就需要用到CSS中的分页样式。下面介绍两种实现方式:1.使用伪元素来实现分页.pagebreak { pageb...

CSS是一种常用的网页样式设计语言，在设计过程中有时需要将页面的内容分成两页来显示，这时就需要用到CSS中的分页样式。下面介绍两种实现方式:

1.使用伪元素来实现分页

.page-break {
  page-break-after: always;
} 

在需要分页的地方添加class为.page-break的标签，就可以实现分页效果。

2.使用multi-column布局实现分页

.multi-column {
  -moz-column-count: 2; /* Firefox */
  -webkit-column-count: 2; /* Safari 和 Chrome */
  column-count: 2;
  -moz-column-gap: 20px;
  -webkit-column-gap: 20px;
  column-gap: 20px;
} 

在需要分页的区域添加class为.multi-column的标签，就可以实现分为两栏的效果。

以上两种方法都可以实现内容分页的效果，根据实际需要选择适合的方式即可。