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

用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实现的更多相关文章

  1. css文本溢出隐藏显示省略号（单行+多行）

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  2. html5文本超过指定行数隐藏显示省略号

    这个很简单,直接贴代码就好了 HTML <span class="name">博客园是一个面向开发者的知识分享社区.自创建以来,博客园一直致力并专注于为开发者打造一个纯 ...

  3. 新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题

    上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用 ...

  4. css 文本换行 文本溢出隐藏用省略号表示剩下内容

    正常文本的显示 <style> p{ width: 300px; box-shadow: 0 0 10px #ccc; padding: 0 20px; margin: 20px 100p ...

  5. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  6. CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）

    http://www.52css.com/article.asp?id=602 ===================================================     html ...

  7. 用css3让溢出内容显示省略号

    css3现在越来越普及了.给我们前端人员也带来了极大的便利.以前要实现让溢出的内容显示省略号还得通过js实现,现在完全可以用css代替之. 主要的代码如下: <style type=" ...

  8. css 溢出文本显示省略号

    这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...

  9. 使用text-overflow:ellipsis对溢出文本显示省略号有两个好处

    使用text-overflow:ellipsis对溢出文本显示省略号有两个好处,一是不用通过程序限定字数:二是有利于SEO.需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友好 ...

随机推荐

  1. oracle迁移postgres之-oracle_fdw

    1. 安装oracle_fdw 在编译安装前,需要设置postgres的环境变量,如在.bash_profile中增加: export ORACLE_HOME=/u01/app/oracle expo ...

  2. 关于Java加载属性文件放在web容器不好使的解决办法

    //使用Spring的工具就行了1 import java.util.Properties; import org.springframework.core.io.support.Properties ...

  3. 如何利用【DataTable】结合自己本地数据库，使用表格

    如何利用[DataTable]结合自己本地数据库,使用表格我们都知道DataTable的使用与配置,平时我们都是用一个json文件来代替后台,但是实际上我们在与后台交互的时候,后台先取到数据库里面的信 ...

  4. 快速增加sql数据

    declare @i int begin insert into dbo.w10test(Name) select Name from dbo.w10test end;

  5. getFragmentManager()和getSupportFragmentManager()

    在Android开发中,少不了Fragment的运用.目前在实际运用中,有v-4包下支持的Fragment以及app包下的Fragment,这两个包下的FragmentManager获取方式有点区别, ...

  6. 使用xfire工具搭建webservice

    一个简单的项目,下载下来导入可以直接使用 https://yunpan.cn/cY8ANUAYLgy7s  访问密码 99e3

  7. Windows 服务快捷启动命令

    gpedit.msc-----组策略sndrec32-----录音机nslookup----- ip地址侦测器explorer------ 打开资源管理器logoff-------注销命令tsshut ...

  8. 1019: [SHOI2008]汉诺塔

    1019: [SHOI2008]汉诺塔 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 1495  Solved: 916[Submit][Status] ...

  9. Linux C++线程池

    .为什么需要线程池? 部分应用程序需要执行很多细小的任务,对于每个任务都创建一个线程来完成,任务完成后销毁线程,而这就会产生一个问题:当执行的任务所需要的时间T1小于等于创建线程时间T2和销毁线程时间 ...

  10. Node聊天程序实例02：chat_server.js

    作者:vousiu 出处:http://www.cnblogs.com/vousiu 本实例参考自Mike Cantelon等人的<Node.js in Action>一书. chat_s ...