文字超长，实现展开收起功能...

对于超长文字，有时需要实现...功能。如果...不需要获取事件，直接用css3来实现：

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

如果需要获取事件，点击还能展开，怎么处理呢？

1、计算屏幕可现实宽度，然后看一行可以显示多少个字符，然后截取显示。

    这个就有点复杂了，需要考虑的点很多：

    a)中文，英文字符，

    b)换行符

    c)自定义表情（如果有

    d)每一行最后位置不够后面一个完整字符显示，可能下一个字符是中文，可能下一个字符是英文。

2、使用getClientRects来精确做到。一个一个字符的减少，然后获取当前有多少行，当达到所需要的行数，则OK了，把减少的隐藏。

fn.handleTxt = function() {
        var self = this;
        var dom = document.querySelectorAll(".item[data-id]");
        function removeA(index) {
            dom[index].removeAttribute("data-id");
        }
        for(var i=0,len=dom.length;i3){
                var step=1;
                if(/$/.test(t)){
                    step = 5;
                }else{
                    var reg = t.match(/]*>$/);//如果是 则需要整体前移，否则会折断
                    if(reg&®[0]) step = reg[0].length;
                }
                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(".item_more").offsetWidth;
                obj.hideTxt+=(rect[rect.length-1].width>(dom[i].offsetWidth-height)?'':'');//页面收起和正文重叠
            }else{
                dom[i].querySelectorAll(".dot").forEach(function (el) {
                    el.style.display="none";//把点点和展开放开，为后面计算更真实
                });
            }
            obj.showTxt = t;
            obj.txtDone = 1;
            removeA(i);
        }
        self.feedObj.openText = self.feedObj.feedlist.length;
    }
    function getLength(list){
        var l = 0, lastBottom;
        for(var i=0,len=list.length;i

效果图：

    
        天的阳光真的超级好 很适合出门拍照，但你有没有厌倦自己总是很学生气的打扮？
    
    ...
    觉得山顶的风景实在是有够浪漫
    展开