温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS中怎么实现一个分页符功能

发布时间:2021-08-09 17:27:14 来源:亿速云 阅读:130 作者:Leah 栏目:开发技术

这期内容当中小编将会给大家带来有关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中怎么实现一个分页符功能了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI