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

　

收起

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

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

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

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

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

a)中文，英文字符，

b)换行符

c)自定义表情（如果有<img实现的）。

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;i<len;i++){
            var shareid = dom[i].dataset.shareid;
            if(typeof shareid=="undefined") continue;
            var obj={};
            for(var j=self.feedObj.openText,len2=self.feedObj.feedlist.length;j<len2;j++){
                if(self.feedObj.feedlist[j].shareid==shareid){
                    obj = self.feedObj.feedlist[j];
                    break;
                }
            }
            if(!obj.showTxt){
                removeA(i);
                continue;
            }
            var rect = dom[i].getClientRects();
            var h = getLength(rect);
            if(h<3){
                removeA(i);
                continue;
            }
            var tl=0,t = obj.showTxt;
            dom[i].querySelectorAll(".dot").foreach(function (el) {
                el.style.display="inline-block";//把点点和展开放开，为后面计算更真实
            });
            var showtxt = dom[i].querySelector(".showtxt");
            while(h>3){
                var step=1;
                if(/<br\/>$/.test(t)){
                    step = 5;
                }else{
                    var reg = t.match(/<img[^>]*>$/);//如果是<img xxxxxx > 则需要整体前移，否则会折断
                    if(reg&&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)?'<span style="display:inline-block;width:'+height+'px"></span>':'');//页面收起和正文重叠
            }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<len;i++){
            if(list[i].bottom == lastBottom){
                return;
            }
            lastBottom = list[i].bottom;
            l++;
        }
        return l;
    }

效果图：

<span class="desc">
    <span class="showTxt">
        天的阳光真的超级好 很适合出门拍照，但你有没有厌倦自己总是很学生气的打扮？
    </span>
    <span class="dot" style="">...</span>
    <span class="hideTxt">觉得山顶的风景实在是有够浪漫</span>
    <span class="more dot" style="">展开</span>
</span>

相关阅读

剑指offer面试题（2）——实现Singleton模式

转自：我想有个长长的名字的博客，剑指offer 面试题2 Singleton模式 C++实现题目：实现Singleton模式​ 以下内容是我在看《剑指offer》

OTTO机器人之太空舞步实现(带胳膊+不带胳膊)

不带胳膊的版本#include <Servo.h> #include <Oscillator.h> #include <EEPROM.h> #define N_SERVOS 4 //-- First step: Config

【matlab相关】m序列的原理及实现

1、matlab 中实现 https://blog.csdn.net/u011639609/article/details/51472577 亲测可以实现 function [mseq] = m_sequence(fbc

使用ServletFileUpload 实现文件上传 和获取文件信息

1、我使用的是ServletFileUpload来实现同个form表单中图片和文字信息的同时上传（支持多文件上传），首先我们先看下前端JSP页面的实例

用户上传图片后实现图片预览效果（解决fakepath路径问题

注意：实现这个效果最重要的就是获取到用户上传到网页上的真实路径。关键代码：<%@ page language="java" contentType="text/html; c