的显示本文主要总结一下小编解决这个问题的方法。如有不足之处，请指正。单行文字ellipsis.ellipsis-line{border:1pxsolid#f70505;填充：8px；宽度：400px；溢出：隐藏；文本溢出：省略号；//文字溢出显示省略号white-space:nowrap;//文本不会换行}语法：text-overflow:clip/ellipsis;默认值：clip适用于：所有元素clip：当对象中的文本溢出时，省略号（...）不会显示，但溢出部分会被截掉。ellipsis：当对象内的文本溢出时显示省略号（...）。在使用的时候，有时候会发现不会出现省略号的效果。经过测试发现，使用ellipsis时，必须和overflow:hidden一起使用；空白：nowrap；宽度：具体值；这三种样式可以一起使用。影响。多行文字省略直接使用css属性-webkit-line-clamp:n;在WebKit浏览器或者移动端设置页面比较简单（大部分都是以WebKit为核心的浏览器），直接使用WebKit的CSS扩展属性即可（WebKit是私有属性）-webkit-line-clamp;注意：这是一个不受支持的WebKit属性，它没有出现在CSS规范草案中。-webkit-line-clamp用于限制块元素中显示的文本行数。为了达到这个效果，需要结合其他的WebKit属性。常用组合属性：display:-webkit-box;必须组合以将对象显示为灵活的盒模型的属性。-webkit-box-orient必须与设置或检索flexbox对象子元素排列的属性结合。text-overflow:ellipsis;,可用于多行文本的情况，使用省略号“...”隐藏超出范围的文本。此属性仅适用于WebKit浏览器或移动（主要是WebKit核心）浏览器。多线{边框：1pxsolid#f70505；宽度：400px；溢出：隐藏；文本溢出：省略号；显示：-webkit-box；-webkit-line-clamp:3;-webkit-box-orient:vertical;}效果如图：从效果上看，它的优点是：1.响应式截断，根据不同的宽度做了调整2.省略号只有在文字出现的时候才显示超出范围，否则不显示省略号。3.浏览器原生实现，所以省略号的位置显示的恰到好处，但是缺点也很直接，因为-webkit-line-clamp是一个不规则的属性，在CSS规范草案中没有出现。也就是说，只有以webkit为核心的浏览器才支持该属性。Firefox、IE等浏览器根本不支持该属性，浏览器兼容性不好。使用场景：多用于移动页面，因为移动设备浏览器大多基于webkit内核。除了兼容性差之外，截断的效果还是不错的。使用定位和伪类元素p{position:relative;宽度：400px；行高：20px；最大高度：60px；溢出：隐藏；}p::after{内容：“...”；位置：绝对；底部：0；右：0；左填充：40px；背景：-webkit-linear-gradient（左，透明，#fff55%）；背景：-o-linear-gradient（右，透明，#fff55%）；背景：-moz-linear-gradient（右，透明，#fff55%）；background:linear-gradient(toright,transparent,#fff55%);}效果如图：适用场景：文字内容较多，判断文字内容一定要超出容器，所以选择这种方式是不错的选择。但是在文字不超行的时候也会出现省略号，这个方法可以结合js进行优化。注意：将height设置为line-height的整数倍，防止露出多余的文字。向p::after添加渐变背景可以防止文本只显示一半。由于ie6-7不显示content内容，需要添加标签兼容ie6-7（如：…）；为了与ie8兼容，需要将::after替换为:after。结合js优化代码css:p{position:relative;宽度：400px；行高：20px；溢出：隐藏；}.p-after：after{内容：“...”；位置：绝对；底部：0；右：0；左填充：40px；背景：-webkit-linear-gradient（左，透明，#fff55%）；背景：-moz-linear-gradient（左，透明，#fff55%）；背景：-o-线性渐变（左，透明，#fff55%）；background:linear-gradient(toright,transparent,#fff55%);}js:$(function(){//获取文字的行高，获取文字的高度，假设指定的个数lines是五行，然后限制超出行数的部分高度，加上省略号$('p').each(function(i,obj){varlineHeight=parseInt($(this).css("line-height"));varheight=parseInt($(this).height());if((height/lineHeight)>3){$(this).addClass("p-after")$(this).css("height","60px");}else{$(this).removeClass("p-after");}});})使用第三方插件或者自己写脚本控件那里网上有很多介绍用JavaScript实现多行文本的溢出和遗漏，有的使用插件，有的使用自己封装的JavaScript文件，不过我觉得还是用自己写的js好//div
