CSS中怎么实现一个分页符功能-创新互联

这期内容当中小编将会给大家带来有关CSS中怎么实现一个分页符功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

“只有客户发展了，才有我们的生存与发展！”这是创新互联的服务宗旨！把网站当作互联网产品，产品思维更注重全局思维、需求分析和迭代思维，在网站建设中就是为了建设一个不仅审美在线，而且实用性极高的网站。创新互联对网站制作、做网站、网站制作、网站开发、网页设计、网站优化、网络推广、探索永无止境。

page-break-after可以实现强制分页，比如始终在<footer>元素后插入分页符,@mediaprint表示这段css只在打印时起作用。

css分页符语法

@mediaprint{

footer{page-break-after:always;}

}

css语法

page-break-after:auto|always|avoid|left|right|initial|inherit;

属性值

值

描述

auto默认。自动分页

always总是在元素后插入分页符

avoid避免在元素后分页（如果可能）

left在元素后插入分页符，以便将下一页格式化为左页

right在元素之后插入分页符，以便将下一页格式化为右页

initial将此属性设置为其默认值。

inherit从其父元素继承此属性。

page-break-before

page-break-before属性设置元素前的page-breaking行为。

网页中如何用CSS设置打印分页符

Word中按Ctrl+Enter创建一个分页符，方便打印，其实网页中也可以，用CSS的page-break-after:always;。

<p>第1页</p>

<div></div>

<p>第2页</p>

<div></div>

<p>第3页</p>

任何浏览器都支持page-break-after:always;，但page-break-after的其他属性值left、right、inherit、avoid则总有一些浏览器不支持。page-break-after应用于position值为relative或static的非浮动块级元素。元素或父元素的display为none时，page-break-after不起作用。

上面把page-break-after应用在一个空白的div，使看起来更像一个分页符，其实page-break-after应用在当前页的最后一个标签，比如下面的代码：

<p>第1页</p>

<p>第1页</p>

<p>第2页</p>

<p>第2页</p>

<p>第3页</p>

<p>第3页</p>

page-break-after的元素在打印时，必须是可显示的，否则不起作用。

上述就是小编为大家分享的CSS中怎么实现一个分页符功能了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。

网站标题：CSS中怎么实现一个分页符功能-创新互联
URL标题：https://www.cdcxhl.com/article10/iepdo.html

成都网站建设公司_创新互联，为您提供关键词优化、ChatGPT、动态网站、手机网站建设、面包屑导航、全网营销推广

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联