本文介绍了css3溢出隐藏的方法，对大家的学习或工作有一定的参考价值。有需要的朋友下面和边肖一起学习。

如果实现单行文本溢出来显示省略号，同学们应该都知道使用text-overflow的属性：省略号，当然你需要加上宽度来兼容部分浏览。

实现方法：

溢出：隐藏；

文本溢出：省略号；

空白：nowrap

但是，该属性仅支持单行文本的溢出显示省略号。如果要实现多行文字的溢出显示省略号怎么办？

接下来，我们重点来看看多行文字溢出显示的省略号，如下。

实现方法：

显示：-WebKit-box；

-webkit-box-orient:垂直；

-WebKit-line-clamp:3；

溢出：隐藏；

适用范围：

由于WebKit的CSS扩展属性，该方法适用于WebKit浏览器和移动终端。

注意：

-webkit-line-clamp用于限制block元素中显示的文本行数。为了达到这个效果，它需要结合其他WebKit属性。常见组合属性：

显示：-WebKit-box；对象必须通过组合的属性显示为弹性扩展框模型。

-webkit-box-orient必须与属性结合使用，以设置或检索伸缩框对象的子元素的排列。

实现方法：

p {位置：相对；行高：20px最大高度：40px溢出：隐藏；}

p:在{内容： '.'之后；位置：绝对；底部：0；右：0；左填充：40px

背景：-WebKit-线性-渐变(左，透明，# fff 55%)；

背景：-o-线性-渐变(右，透明，# fff 55%)；

背景：-moz-linear-gradient(右，透明，# fff 55%)；

背景：线性渐变(向右，透明，# fff 55%)；

}

适用范围：

这种方法应用范围很广，但是当文字没有超出本行时会出现省略号。这种方法可以结合js进行优化。

注意：

将高度设置为行高的整数倍，以防止暴露多余的文本。

为p:after添加渐变背景，以避免文本只显示一半。

因为ie6-7不显示内容内容，所以需要添加兼容ie6-7的标签(例如：span…span/)；Ie8兼容性要求用：after替换：after。

以上是边肖介绍的css3溢出隐藏方法。希望对你有帮助。非常感谢您对我们网站的支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。