elementplus省略超出文本后面加详情 js文本超出用省略号代替

转载

ctaxnews 2024-04-16 13:50:57

文章标签 html CSS javascript 文章分类 机器学习人工智能

在页面重构中，经常需要将过多的内容隐藏而显示部分。在单行文本中实现非常简单，但是在多行文本中，则需要根据实际选择不同的方式。

用CSS实现多行溢出隐藏的代码非常简单，但是兼容性也相对较低。

1 display: -webkit-box; 
2 display: -moz-box;  
3  white-space: pre-wrap; 
4 word-wrap: break-word;
5  overflow: hidden; 
6 text-overflow: ellipsis; 
7 -webkit-box-orient: vertical; 
8  -webkit-line-clamp:2;   /*显示行数*/

这不是我们这次需要讲解的重点。

这次的关注点在于如何用JS来实现隐藏过多内容，用省略号替换显示的功能。

1. 一段需要隐藏的文本

1 <body>
2     <div class="common">
3         <h2>example</h2>
4         <div class = "demo">
5             <div class="text" id="overflowhidden">吉日兮辰良，穆将愉兮上皇；抚长剑兮玉珥[ěr]，璆[qiú]锵鸣兮琳琅；瑶席兮玉瑱[zhèn]，盍[hé]将把兮琼芳；蕙肴蒸兮兰藉，奠桂酒兮椒浆；扬枹[fú]兮拊[fǔ]鼓，疏缓节兮安歌；陈竽瑟兮浩倡；灵偃蹇[jiǎn]兮姣[jiāo]服，芳菲菲兮满堂；五音纷兮繁会，君欣欣兮乐康。浴兰汤兮沐芳，华采衣兮若英；灵连蜷兮既留，烂昭昭兮未央；謇[jiǎn]将憺[dàn]兮寿宫，与日月兮齐光；龙驾兮帝服，聊翱游兮周章；灵皇皇兮既降，猋[biāo]远举兮云中；览冀洲兮有余，横四海兮焉穷；思夫君兮太息，极劳心兮忡忡。吉日兮辰良，穆将愉兮上皇；抚长剑兮玉珥[ěr]，璆[qiú]锵鸣兮琳琅；瑶席兮玉瑱[zhèn]，盍[hé]将把兮琼芳；蕙肴蒸兮兰藉，奠桂酒兮椒浆；扬枹[fú]兮拊[fǔ]鼓，疏缓节兮安歌；陈竽瑟兮浩倡；灵偃蹇[jiǎn]兮姣[jiāo]服，芳菲菲兮满堂；五音纷兮繁会，君欣欣兮乐康。浴兰汤兮沐芳，华采衣兮若英；灵连蜷兮既留，烂昭昭兮未央；謇[jiǎn]将憺[dàn]兮寿宫，与日月兮齐光；龙驾兮帝服，聊翱游兮周章；灵皇皇兮既降，猋[biāo]远举兮云中；览冀洲兮有余，横四海兮焉穷；思夫君兮太息，极劳心兮忡忡。吉日兮辰良，穆将愉兮上皇；抚长剑兮玉珥[ěr]，璆[qiú]锵鸣兮琳琅；瑶席兮玉瑱[zhèn]，盍[hé]将把兮琼芳；蕙肴蒸兮兰藉，奠桂酒兮椒浆；扬枹[fú]兮拊[fǔ]鼓，疏缓节兮安歌；陈竽瑟兮浩倡；灵偃蹇[jiǎn]兮姣[jiāo]服，芳菲菲兮满堂；五音纷兮繁会，君欣欣兮乐康。浴兰汤兮沐芳，华采衣兮若英；灵连蜷兮既留，烂昭昭兮未央；謇[jiǎn]将憺[dàn]兮寿宫，与日月兮齐光；龙驾兮帝服，聊翱游兮周章；灵皇皇兮既降，猋[biāo]远举兮云中；览冀洲兮有余，横四海兮焉穷；思夫君兮太息，极劳心兮忡忡。吉日兮辰良，穆将愉兮上皇；抚长剑兮玉珥[ěr]，璆[qiú]锵鸣兮琳琅；瑶席兮玉瑱[zhèn]，盍[hé]将把兮琼芳；蕙肴蒸兮兰藉，奠桂酒兮椒浆；扬枹[fú]兮拊[fǔ]鼓，疏缓节兮安歌；陈竽瑟兮浩倡；灵偃蹇[jiǎn]兮姣[jiāo]服，芳菲菲兮满堂；五音纷兮繁会，君欣欣兮乐康。浴兰汤兮沐芳，华采衣兮若英；灵连蜷兮既留，烂昭昭兮未央；謇[jiǎn]将憺[dàn]兮寿宫，与日月兮齐光；龙驾兮帝服，聊翱游兮周章；灵皇皇兮既降，猋[biāo]远举兮云中；览冀洲兮有余，横四海兮焉穷；思夫君兮太息，极劳心兮忡忡。吉日兮辰良，穆将愉兮上皇；抚长剑兮玉珥[ěr]，璆[qiú]锵鸣兮琳琅；瑶席兮玉瑱[zhèn]，盍[hé]将把兮琼芳；蕙肴蒸兮兰藉，奠桂酒兮椒浆；扬枹[fú]兮拊[fǔ]鼓，疏缓节兮安歌；陈竽瑟兮浩倡；灵偃蹇[jiǎn]兮姣[jiāo]服，芳菲菲兮满堂；五音纷兮繁会，君欣欣兮乐康。浴兰汤兮沐芳，华采衣兮若英；灵连蜷兮既留，烂昭昭兮未央；謇[jiǎn]将憺[dàn]兮寿宫，与日月兮齐光；龙驾兮帝服，聊翱游兮周章；灵皇皇兮既降，猋[biāo]远举兮云中；览冀洲兮有余，横四海兮焉穷；思夫君兮太息，极劳心兮忡忡。</div>
6         </div>
7     </div>
8     <script type="text/javascript" src="js/common.js"></script>
9 </body>

JS调用

1 window.onload = function(){
2     var text = document.getElementById("overflowhidden");
3     var str = text.innerHTML; 
4     window.onresize = function(){
5         overflowhidden("overflowhidden",3,str);
6     }
7     overflowhidden("overflowhidden",3,str);
8 }

2. JS处理

JS处理的基本思路是获取到文本中设置的line-height属性。在获取到相关属性后，根据传入的显示行数来计算整个文本的高度。然后根据文本内容撑开的高度是否大于计算得到的文本高度来判断是否需要溢出处理。

i. 脑抽的做法

1 var overflowhidden = function(id, rows, str){
 2     var text = document.getElementById(id);
 3     var style = getCSS(text);
 4     var lineHeight = style["line-height"];   //获取到line-height样式设置的值 必须要有
 5     var at = rows*parseInt(lineHeight);      //计算包含文本的div应该有的高度
 6     var tempstr = str;                       //获取到所有文本
 7     text.innerHTML = tempstr;                //将所有文本写入html中
 8     var len = tempstr.length;
 9     var i = 0;
10     if(text.offsetHeight <= at){             //如果所有文本在写入html后文本没有溢出，那不需要做溢出处理
11         /*text.innerHTML = tempstr;*/
12     }
13     else {                                   //否则 一个一个字符添加写入 不断判断写入后是否溢出
14         var temp = "";
15         text.innerHTML = temp;
16         while(text.offsetHeight <= at){
17             temp = tempstr.substring(0, i+1);
18             i++;
19             text.innerHTML = temp;
20         }
21         var slen = temp.length;
22         tempstr = temp.substring(0, slen-1);
23         len = tempstr.length
24         text.innerHTML = tempstr.substring(0, len-3) +"...";     //替换string后面三个字符 
25         text.height = at +"px";                                  //修改文本高度 为了让CSS样式overflow：hidden生效
26     }
27     
28 }

实现结果：

elementplus省略超出文本后面加详情 js文本超出用省略号代替_javascript

elementplus省略超出文本后面加详情 js文本超出用省略号代替_CSS_02

效果看起来很友好，如果不考虑跑疯了的while循环

ii. 没那么脑抽的做法

var overflowhidden = function(id, rows, str){
    var text = document.getElementById(id);
    var style = getCSS(text);
    var lineHeight = style["line-height"];
    var at = rows*parseInt(lineHeight);
    var tempstr = str;
    text.innerHTML = tempstr;
    var len = tempstr.length;
    var i = 0;
    if(text.offsetHeight <= at){                  //如果所有文本在写入html后文本没有溢出，那不需要做溢出处理
        /*text.innerHTML = tempstr;*/
    }
    else {                                        //否则 二分处理需要截断的文本
        var low = 0;
        var high = len;
        var middle;
        while(text.offsetHeight > at){
            middle = (low+high)/2;
            text.innerHTML = tempstr.substring(0,middle);   //写入二分之一的文本内容看是否需要做溢出处理 
            if(text.offsetHeight < at){                         //不需要 则写入全部内容看是否需要 修改low的值
                text.innerHTML = tempstr.substring(0,high);
                low = middle;
            }
            else{                                          //写入二分之一的文本内容依旧需要做溢出处理 再对这二分之一的内容的二分之一的部分做判断
                high = middle-1;                           //修改high值
            }
        }
        tempstr = tempstr.substring(0, high)+"...";
        text.innerHTML = tempstr;
        if(text.offsetHeight > at){
            tempstr = tempstr.substring(0, high-3)+"...";
        }
        text.innerHTML = tempstr;
        text.height = at +"px";
    }
}

实现效果：

elementplus省略超出文本后面加详情 js文本超出用省略号代替_html_03