使用css3实现文本超出省略号和多行省略号

首先编写正常状态超出文本隐藏的效果；代码如下

overflow: hidden;

下面是单行超出文本出现省略号的效果；代码如下

overflow:hidden; text-overflow:ellipsis; white-space:nowrap

这里最好给标签添加上高度，或者设置文字不能换行

显示单行省略号效果

下面是多行超出文本出现省略号的效果；代码如下

overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;

这里要注意不要给标签添加高度，让文字自动撑开多行就行

显示多行省略号效果

 

注意事项

多行省略号的方法只适合谷歌WebKit内核的浏览器，可以用其他方法实现

每天进步一点点！希望对大家有帮助