重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍css如何设置多行超出显示省略号,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
专注于为中小企业提供网站设计、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业井冈山免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了1000多家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
设置方法:1、用“overflow:hidden;”把超出的部分隐藏起来;2、用“-webkit-line-clamp:行数;”限制显示文本的行数;3、用“text-overflow:ellipsis;”显示省略号来代表被隐藏的超出部分。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
css设置多行超出省略号
实现思想:
1、使用“overflow:hidden;”语句不显示超过对象尺寸的内容,就是把超出的部分隐藏了;
2、使用“-webkit-line-clamp: 行数;”语句限制显示文本的行数
3、使用“text-overflow:ellipsis;”语句用省略号“…”隐藏超出范围的文本
实现代码:
css多行文本超出长度显示省略号,css多行文本超出长度显示省略号, css多行文本超出长度显示省略号,css多行文本超出长度显示省略号
效果图:
说明:移动端浏览器绝大部分是WebKit内核的,所以该方法适用于移动端;
-webkit-line-clamp
用来限制在一个块元素显示的文本的行数,这是一个不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中;
display: -webkit-box
将对象作为弹性伸缩盒子模型显示 ;
-webkit-box-orient
设置或检索伸缩盒对象的子元素的排列方式 ;
以上是“css如何设置多行超出显示省略号”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!