最多显示三行，多余...展开，点击展开收起 getClientRects

需求：显示文本，最多显示三行，多余的显示 ... 展开，点击展开收起.

效果如下：

需要考虑的点：换行，展开的时候遮住收起

如果是不需要有固定在右侧的展开收起，那么移动端直接用css3：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical

之前想过用屏幕宽度减去两边留白  除以字体大小，得出每一行可以显示多少行字。

var oneCount = Math.floor((window.innerWidth - 55-15 ) / 16),

function getStrByteLen(v) {
    //一个中文按照两个字节算，返回长度
    return v ? v.replace(/[\u00FF-\uFFFF]/g, "  ").length : 0;
}

然而需要考虑的因素很多：

1、头部有标签，得加入计算

2、有换行

3、单行可显示的字符数不是刚好对应上，如可以显示3个字符，那么“aa中"，则中字换行。

……

等等总是很难达到比较满意的效果。显示总有出入。

真正解决问题是使用

getClientRects

getClientRects这个方法如果是读取div元素上的，则总是一行

 我是一个小文本，
我是一个小文本

那么如下：

document.querySelector(".txt").getClientRects()

读取到的总是一行

需要把块级元素div ---> 行内元素span

function handleTxt() {
        var dom = document.querySelectorAll(".quan_feed_desc[data-shareid]");
        for(var i=0,len=dom.length;i3){
                var step=1;
                if(/$/.test(t)){//回退的时候，如果碰到换行要整体替换
                    step = 5;
                }
                t = t.slice(0,-step);
                showtxt.innerHTML = t;
                h = getLength(dom[i].getClientRects());
                tl+=step;
            }
            obj.hideTxt =obj.showTxt.slice(obj.showTxt.length-tl);
            if(obj.hideTxt){
                var height=dom[i].querySelector(".quan_feed_more").offsetWidth;//页面展开更多的大小
                obj.hideTxt+=(rect[rect.length-1].width>(dom[i].offsetWidth-height)?'':'');//页面收起和正文重叠
            }
            obj.showTxt = t;
            obj.txtDone = 1;
            dom[i].removeAttribute("data-shareid");
        }
        feedObj.openText = feedObj.feedlist.length;
    }

function getLength(list){
    var line = 0, lastBottom=0;
    for(var i=0,len=list.length;i