1.单行文字溢出宽度：300px;/*宽度必须事先设置*/overflow:hidden;/*超出隐藏*/text-overflow:ellipsis;/*Elipsis*/white-space:nowrap;/*不换行*/2.多行文字溢出方法一：通过定位实现。这种方法的应用范围很广，但是在文本不超过行的时候也会出现省略号。这个方法可以结合js进行优化。p{width:300px;/*可选*/position:relative;行高：20px；height:60px;/*显示3行*/overflow:hidden;padding:2px10px;}p::after{content:"...";位置：绝对；底部：0；right:0;}需要注意的几点：利用height和line-height的倍数关系来调整显示的行数，防止露出多余的文字。向p::after添加渐变背景可以防止文本只显示一半。IE6-7不显示content内容，所以要兼容IE6-7，可以给content加上标签，比如用...来模拟；要支持IE8，您需要将::after替换为:after。方法二：使用WebKit的CSS扩展属性，该方法适用于WebKit浏览器和移动端。显示：-webkit-box；-webkit-line-clamp：3；-webkit-box-orient：垂直；溢出：隐藏；注意：显示：-webkit-box；将对象显示为灵活的盒子模型。-webkit线夹；用于限制块元素中显示的文本行数。-webkit-box-orient；设置或检索flexbox对象的子元素的排列。方法三：使用JavaScript。$(".class").each(function(){//设置显示字数并获取字符串varmaxwidth=280;if($(this).text().length>maxwidth){//截取字符串$(this).text($(this).text().substring(0,maxwidth));//用省略号显示$(this).html($(this).html()+"...");}});参考文章链接：http://caibaojian.com/multili...
