CSS中的页面分页特性，指的是将一个长页面分成多个页码以方便用户的阅读。使用CSS分页，可以使用户不用滚动页面就可以浏览整份文档，对于一些包含大量文字的长文档，使用这种技术可以减轻用户的阅读负担。
一、实现页面分页的方法
在CSS中，实现分页一般有两种方法：一种是使用page-break属性，另一种是使用column属性。
1、page-break属性
page-break属性用于控制多媒体分页媒体类型，例如打印和打印预览。该属性支持多个值，包括page-break-before、page-break-after、page-break-inside。
.page {
page-break-before: always;
}
上述代码表示在该元素之前插入页面分页。其他值还包括：
- auto：默认值，根据页面内容自动分页
- always：强制分页，并在当前元素前插入分页符
- avoid：不允许分页，并将当前元素放在一页上
2、column属性
column属性用于控制文本跨页分布在几个列里。该属性也可以指定列的数量，列与列之间的间隔，以及分组元素之间要强制插入列中断的位置。
.column {
column-count:3;
column-gap:20px;
}
上述代码表示将该元素分成3列，并且每列之间的间隔为20px。其他属性还包括：
- column-width：指定每列的宽度
- column-rule：指定列与列之间的样式和宽度
- column-span：指定元素跨越几列
二、使用CSS实现页面分页的例子
下面是一个使用CSS实现页面分页的例子，我们使用page-break属性，将一段长文本分成3个页面：
.content {
width: 600px;
margin: 0 auto;
padding: 20px;
font-size: 18px;
}
p {
margin-bottom: 20px;
}
.page {
page-break-before: always;
}
长文本示例
这是一段长文本，请注意观察页面分页。这是第一页。
这是第二页。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/191019.html
微信扫一扫 
支付宝扫一扫 