zoyoy责编
伍杏玲出品
CSDN博客CSS单行/多行文本，超出隐藏并显示省略号方法一：使用CSS属性单行文本溢出显示省略号width:px;overflow:hidden;text-overflow:ellipsis;//文本溢出显示省略号white-space:nowrap;//文本不会换行多行文本溢出显示省略号width:px;overflow:hidden;text-overflow:ellipsis;//文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;因为使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：display:-webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示。-webkit-box-orient必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。使用场景：多用于移动端页面，因为移动设备浏览器更多是基于WebKit内核，除了兼容性不好，实现截断的效果不错。方法二：利用定位和伪类元素divclass=text适合场景：文字内容较多，确定文字内容一定会超过容器的，那么选择这种方式不错。但文字未超出行的情况下也会出现省略号,可结合js优化该方法。/text.text{position:relative;width:px;line-height:20px;max-height:60px;overflow:hidden;}.text::after{content:...;position:absolute;bottom:0;right:0;padding-left:40px;//添加渐变背景避免文字只显示一半,难看background:-webkit-linear-gradient(left,transparent,#fff55%);background:-o-linear-gradient(right,transparent,#fff55%);background:-moz-linear-gradient(right,transparent,#fff55%);background:linear-gradient(toright,transparent,#fff55%);}适合场景：文字内容较多，确定文字内容一定会超过容器的，那么选择这种方式不错。但文字未超出行的情况下也会出现省略号,可结合js优化该方法。方法三：运用第三方插件或者自己写JS脚本控制clamp.jsjQuery.dotdotdotCSS垂直水平居中CSS垂直水平居中的各种解决方法汇总：