一、css方法

1.当希望文本只保留一行时
        
            white-space:nowrap;/*强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。*/
            overflow: hidden;/*超出部分隐藏*/
            text-overflow: ellipsis;/*隐藏部分以省略号代替*/
2.当文本需要保留多行时
        a.webkit内核浏览器(谷歌,Safarim,QQ浏览器)情况下
            overflow: hidden;/*超出部分隐藏*/
            text-overflow:ellipsis;/*隐藏部分以省略号代替*/
            display: -webkit-box;/*将对象作为弹性伸缩盒子模型显示*/
            -webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性*/
            -webkit-box-orient: vertical;/*子元素垂直排列*/
        b.其他浏览器的兼容方案
                li{
                    position:relative;
                    line-height:20px;
                    max-height:40px;
                    overflow:hidden;
                    width: 200px;
                    border: 1px solid red;
                }
                li:after{
                    content: "...";
                    position:absolute;
                    bottom:0;
                    right:0;
                    padding-left:40px;
                    background:linear-gradient(to right,transparent,#fff 55%);
                }

二、js文本溢出隐藏方案

clamp.js插件

var module = document.getElementById("wrapper");
    $clamp(module, {clamp: 3});
    clamp (Number | String | 'auto') 
                number: 行数；
                string: px；
    useNativeClamp(Boolean)
                在受支持的浏览器(即webkit内核浏览器)，默认为true，
                但有时它会不稳定，因此可以将其设置为false来使用基于JavaScript的解决方案。
    truncationChar (String)
                执行截断后在HTML元素末尾插入的字符。这默认为省略号(…）
    splitOnChars (Array)
                确定要将元素块分为较小部分的字符，['.', ',', ' ']即标点符号，它将首先删除句子，然后删除逗号短语，然后删除单词，最后删除单个字符，试图找到正确的高度。
这会在删除较大文本段(如段落)时提高性能和减少循环。默认设置为['.', '-', '–', '—', ' ']。
    truncationHTML(String)
                在截断字符之前要插入的HTML字符串。如果想要添加一个“读取更多”链接或类似的东西在末尾，可以使用此属性。