今天给大家分享的是CSS设置文本溢出不换行的效果的实现,这个效果在一些资讯类的网站上可以使用到,也就是当本文溢出的时候,显示省略号,那么具体怎样做呢?感兴趣的朋友接下来跟随小编一起来学习一下吧。
本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。
css怎么设置溢出不换行?
css文本溢出不换行,省略号显示
单行文本溢出;
设置宽度,多于文本溢出,显示省略号;
div{ width:300px; overflow: hidden; text-overflow:ellipsis; whitewhite-space: nowrap; }
多行文本溢出;
使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
注意:
1.-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
2.display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
3.-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
div{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
不是Webkit浏览器的暂时未有~~
关于CSS设置文本溢出不换行的方法就介绍到这了,有需要的朋友可以参考上述代码,希望本文对大家学习CSS有帮助,如果还想要了解更多请关注群英网络其它相关文章。
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2018 群英 版权所有 茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号-36 粤公网安备 44090202000006号 粤工商备P091701000595