js 多行截取

文字超出，省略号

最终效果

css部分

.demo {
    height: 60px;
    line-height: 20px;
    overflow: auto;
    font-size: 12px;
    color: red;
}

js部分

    $(function(){
        arr = $(".demo");//一个页面可能有多个段落需要截取，因而获得的元素是个数组
        
        //遍历每个段落，逐个截取
        for( i=0; i<arr.length; i++ ) {
            //获得第i个段落的内容
            var str = $(".demo")[i].innerText;
            //获得第i个段落的可见高度
            n = arr[i].offsetHeight;
            //遍历第i个段落的字符数
            for( j=0; j<str.length; j++){
                //逐个往第i个段落里添加内容
                arr[i].innerHTML = str.substr(0, j);
                //当第i个段落的高度大于可见高度时，隐藏剩余部分，并且在最后添加省略号
                if(n < arr[i].scrollHeight) {
                    arr[i].style.overflow = 'hidden';
                    arr[i].innerHTML = str.substr(0, j-3) + '...';
                    break;
                }
            }
        }
    })

思路都写清楚，但是感觉有点蠢呢 =.=