网页前端开发过程中，后台传来的文本数据长度不可控。如果接收到的文本很长，不进行自适应处理，页面效果会很糟糕。自适应处理在这种场景下确实很重要，但也可以考虑另一种解决方案，即本文将要讨论的冗余文本省略，尤其是在手机屏幕资源有限的情况下，应该采用省略文字解决方案。本文将讨论单行和多行文本省略的解决方案，尤其是多行文本的省略，没有单行省略的解决方案简单全面，所以本文重点解决多行文本。单行文字省略单行文字省略的解决方案已经有了比较主流有效的解决方案，就是CSS3的text-overflow属性。该属性可以优雅的完成所有的单行文字省略需求，并且涵盖了目前市面上几乎所有的浏览器版本（浏览器支持请参考：http://caniuse.com/#search=te...）。使用中唯一需要注意的是添加代码：没有这个属性text换行不显示省略号overflow:hidden不显示超出容器的文本内容，没有这个属性，文本会超出容器显示而不被省略省略多行解决方案1text:-webkit-line-clamp(仅适用于webkit内核的浏览器)在webkit内核的浏览器中，省略多行文本可以通过CSS属性-webkit-line-clamp..multiple-line{overflow:hidden;文本溢出：省略号；显示：-webkit-box；-webkit-line-clamp：2；-webkit-box-orient:vertical;}其中overflow:hidden保证超过行数内容不显示；display:-webkit-box和-webkit-box-orient:vertical表示-webkit-box用于显示，行数方向为垂直。这种方法实现简单明了，缺点是使用范围太窄，只适用于webkit内核浏览器。而且-webkit-box已经被flex取代，以后不太可能被其他核心浏览器支持。但是，由于大多数手机浏览器（Safari、AndroidBrowser、Chrome）都是基于webkit的，如果页面只在移动端查看，这是最简单有效的解决方案。方案二：如果clamp.jsCSS处理不了，只能交给JS处理。解决代码可以参考这个仓库~https://github.com/yuanqing/l...基本思路是先按word截断，再按字符截断。单词和字符的截断方法类似。以截断字符的思路为例：每次循环将element.innerHTML减少一个字符；观察此时element元素内容的高度是否满足要求的最大高度；元素内容的高度由element决定。获取偏移高度；获取需要的最大高度：由于传入了最大行数，所以乘以line-height（line-height可以通过计算样式window.getComputedStyle(element).lineHeight获取）；functiontruncateByCharacter(element,maximumHeight,ellipsisCharacter){constinnerHTML=element.innerHTML;让长度=innerHTML.length;while(length>0){element.innerHTML=innerHTML.substring(0,length).replace(TRAILING_WHITESPACE_REGEX,'')+ellipsisCharacter;如果(element.offsetHeight<=maximumHeight){返回;}长度-;}}JS解决方案比CSS更灵活。如果你需要隐藏或显示更多的文本信息，你应该使用clamp.js解决方案。综上所述，本文介绍的冗余文本省略方案是比较常用的。单行文本方案中的text-overflow足以应对各种场景、各种浏览器；而多行省略文字的解决方法比较简单，可以使用-webkit-line-clamp的方式，尤其是移动端，如果有兼容性可以参考clamp.js用JS解决。
