多行溢出隐藏显示省略号功能的JS实现

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

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

 display: -webkit-box;

 display: -moz-box;

  white-space: pre-wrap;

 word-wrap: break-word;

  overflow: hidden;

 text-overflow: ellipsis;

 -webkit-box-orient: vertical;

  -webkit-line-clamp:2;   /*显示行数*/

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

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

1. 一段需要隐藏的文本

 <body>

     <div class="common">

         <h2>example</h2>

         <div class = "demo">

             <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>

         </div>

     </div>

     <script type="text/javascript" src="js/common.js"></script>

 </body>

JS调用

 window.onload = function(){

     var text = document.getElementById("overflowhidden");

     var str = text.innerHTML;

     window.onresize = function(){

         overflowhidden("overflowhidden",3,str);

     }

     overflowhidden("overflowhidden",3,str);

 }

2. JS处理

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

i. 脑抽的做法

 var overflowhidden = function(id, rows, str){

     var text = document.getElementById(id);

     var style = getCSS(text);

     var lineHeight = style["line-height"];   //获取到line-height样式设置的值 必须要有

     var at = rows*parseInt(lineHeight);      //计算包含文本的div应该有的高度

     var tempstr = str;                       //获取到所有文本

     text.innerHTML = tempstr;                //将所有文本写入html中

     var len = tempstr.length;

     var i = 0;

     if(text.offsetHeight <= at){             //如果所有文本在写入html后文本没有溢出，那不需要做溢出处理

         /*text.innerHTML = tempstr;*/

     }

     else {                                   //否则 一个一个字符添加写入 不断判断写入后是否溢出

         var temp = "";

         text.innerHTML = temp;

         while(text.offsetHeight <= at){

             temp = tempstr.substring(0, i+1);

             i++;

             text.innerHTML = temp;

         }

         var slen = temp.length;

         tempstr = temp.substring(0, slen-1);

         len = tempstr.length

         text.innerHTML = tempstr.substring(0, len-3) +"...";     //替换string后面三个字符

         text.height = at +"px";                                  //修改文本高度 为了让CSS样式overflow：hidden生效

     }

 }

实现结果：

效果看起来很友好，如果不考虑跑疯了的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";

    }

}

实现效果：

两种实现效果的比较：

第一种脑抽式写法，需要不断的写入html不断的修改，次数较多，但是很好地将设定的行数填充满。所以实现效果还是蛮好的。

第二种没那么脑抽式写法，二分处理文本数据，修改html的次数相对而言较少。但是只能够满足设置的行数要求，在最后一行可能会有大面积的空白。

总结：

所以该如何改进？

多行溢出隐藏显示省略号功能的JS实现的更多相关文章

css文本溢出隐藏显示省略号（单行+多行）
文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法. 一. 单行文本不换行,并将超出文本隐藏 .box-content{ ove ...
html5文本超过指定行数隐藏显示省略号
这个很简单,直接贴代码就好了 HTML <span class="name">博客园是一个面向开发者的知识分享社区.自创建以来,博客园一直致力并专注于为开发者打造一个纯 ...
新公司入职第一天遇到的关于 CSS 单行溢出文本显示省略号...的问题
上班第一天前端岗位,因为公司这个项目是标准开发所以没法用框架在打架页面,好吧我手写各种div 各种css样式好不忧伤,好吧不废话了进入正题. 想在导航栏中的客户信息功能点实现溢出用 ...
css 文本换行文本溢出隐藏用省略号表示剩下内容
正常文本的显示 <style> p{ width: 300px; box-shadow: 0 0 10px #ccc; padding: 0 20px; margin: 20px 100p ...
CSS——文本超出隐藏显示省略号
文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...
CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）
http://www.52css.com/article.asp?id=602 =================================================== html ...
用css3让溢出内容显示省略号
css3现在越来越普及了.给我们前端人员也带来了极大的便利.以前要实现让溢出的内容显示省略号还得通过js实现,现在完全可以用css代替之. 主要的代码如下: <style type=" ...
css 溢出文本显示省略号
这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...
使用text-overflow:ellipsis对溢出文本显示省略号有两个好处
使用text-overflow:ellipsis对溢出文本显示省略号有两个好处,一是不用通过程序限定字数:二是有利于SEO.需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友好 ...

随机推荐

QDataStream和QByteArray
一个写操作可以参考: QDataStream &operator >>(QDataStream &in, SerializedMessage &message) { ...
canvas中save()和restore()方法
save()和restore()方法是绘制复杂图形不可缺少的方法它们是分别用来保存和恢复canvas状态的,都没有参数 save():用来保存Canvas的状态.save之后,可以调用Canvas的平 ...
er3
<html xmlns:v="urn:schemas-microsoft-com:vml"xmlns:o="urn:schemas-microsoft-com:of ...
【前端】JSON.stringfy 和 JSON.parse（待续）
JSON.stringfy 和 JSON.parse(待续) 支持全局对象JSON的浏览器有:IE8+, FireFox3.5+, Safari4+, Chrome, Opera10.5+ JSON. ...
Spring MVC上传文件
Spring MVC上传文件 1.Web.xml中加入 <servlet> <servlet-name>springmvc</servlet-name> <s ...
Unity手撸2048小游戏——模块拆分
最近惹女票生气了,想起撸个游戏来哄哄她,加之以前在小恩爱App上,玩过那情侣版的2048,加之她喜欢玩这类益智类的游戏,打算撸一个3D的情侣版2048.不过之前没怎么独立做过游戏,就从2D的开始吧. ...
【leetcode❤python】 278. First Bad Version
#-*- coding: UTF-8 -*-# The isBadVersion API is already defined for you.# @param version, an integer ...
ES6 笔记
1.箭头函数箭头函数里的this会引用定义箭头函数时,外部作用域的 this .箭头函数只是引用外部作用域的 this ,本身不存在 this.同时因为没有 this ,所以无法用new ...
Web Service数据源
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
在ionic/cordova中使用Form模型验证（w5cValidator）
在构建ionic项目过程中,当我们创建一个类似表单提交的页面时,可能会对用户的输入内容做某些规则验证,通过后再执行提交处理. 在验证的过程中,为了提供较好的用户体验,可能希望有类似于jquery Va ...

多行溢出隐藏显示省略号功能的JS实现

多行溢出隐藏显示省略号功能的JS实现的更多相关文章

随机推荐

热门专题