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

用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. CAS示例环境部署及配置

    http://wenku.baidu.com/link?url=d6JjWqOtuUediSkV18XagtVG9lVC2hTiaIEimfIgv1PIW8RMA1sXeIqqtJkW90lleYPQ ...

  2. 你年纪轻轻怎么这么"不讲理"

    今天在公交上遇到一出"精彩的打戏",这给我的12月份带来了一丝的"惊喜",1号就能让我碰到这样的事,看来这个月会惊喜不断啊!!!! 这精彩的戏是这样的,公交到了 ...

  3. Linux 指令大全

    作为一个小前端,以前有我们的运维大神在的时候,要给服务器做什么配置的时候就找他(那时幸福到哭),如今他走了,公司也没招人(想把这个钱省下来,让我发现了,毕竟我能当小运维用,虽然很这方面很渣渣,哈哈,偷 ...

  4. Java，double类型转换成String，String装换成double型

    今天,老师布置了小系统,银行用户管理系统,突然发现自己的基础知识好薄弱,就把这些记录一下, double类型转化string:Double.toString(double doub); String类 ...

  5. 以小时候玩的贪吃蛇为例，对于Java图像界面的学习感悟

    简介 正文 01.JFrame是啥? 02.JPanel 03. KeyListener 04.Runnable 05.游戏Running 06.游戏初始类编写 07.main 简介: 一直以来用代码 ...

  6. git使用ssh密钥

    1.查看本地是否有密钥对,如果存在就删除cd ~/.sshid_dsa id_dsa.pub 2.重新生成密钥对ssh-keygen -t rsa -C "your_email@yourem ...

  7. Jenkins安装与基本配置

    环境:centos 6.5,jenkins依赖jdk,当前版本推荐jdk1.8,1.7也可以用 首先,机器应该可以访问外网,用yum安装即可(这里版本号是2.19.4): wget -O /etc/y ...

  8. PHP的一些开源项目网站

    https://github.com/wenzhixin/bootstrap-table https://github.com/1000hz/bootstrap-validator

  9. 30.Nginx集群搭建笔记

    源码安装Nginx: tar -zxvf nginx-1.8.0.tar.gz -C /nginx/        #解压Nginx rpm -ivh keepalived-1.2.13-5.el6_ ...

  10. OpenCV从入门到放弃系列之——图像的基本操作

    读取.修改.保存图像 图像读取函数imread(); 图像颜色空间的转换cvtColor(); 图像保存至硬盘imwrite(); /********************************* ...