css设置隐藏溢出内容的方法,html5溢出隐藏

css设置隐藏溢出内容的方法,html5溢出隐藏,css3溢出隐藏的方法

本文介绍了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溢出隐藏方法。希望对你有帮助。非常感谢您对我们网站的支持!

css设置隐藏溢出内容的方法,html5溢出隐藏