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

用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. Ubuntu14.04_64位使用过程

    1. vmware10 下安装 ubuntu(ps:安装过程中还是将磁盘整的更大一些的好,我最开始20G,不够用啊不够用[典型安装就行]) 2. 右上角的圆圈设置--选择system setting- ...

  2. Prince2七大流程之项目准备

    Prince2七大流程之项目准备     今天我们正式进入七大流程的第一个流程学习,项目准备流程.决定项目是否值得做,是否值得启动.通过回答"是否有一个可交付的.值得做的项目?"这 ...

  3. Java项目多数据源配置

    由于种种原因,有的时候可能要连接别人的数据库,或者不同的数据库没法自动转换,重构起来数据量又太大了,我们不得不在一个项目中连接多个数据源.从网上找了各种资料,只有这位大神给出的解决方案一下子就成功了. ...

  4. [java报错]Could not instantiate listener XXXXXX

    写在开头的话: 兜兜转转,辞去了深圳的工作,回到了武汉,从事的居然一度是我最不想学的语言-java,曾经以为自己并不会java,但是上手之后,发现语言都是相通的,自己一度排斥学习java真的是不能再傻 ...

  5. cf 712E Memory and Casinos

    题意:有一行$n(n \leq 100000)$个方格,从左往右第$i$个方格的值为$p_i(p_i = \frac{a}{b}, 1 \leq a < b \leq 1e9)$,有两种操作,一 ...

  6. mysql 实现 start with

    自己写service----> 传入map(idsql,rssql,prior)   idsql 查询id   rssql 查询结果集    调用 以下方法 @param ids 要查询的起始 ...

  7. linux开发摘要

    1.linux内核文档链接点击打开链接 2.配置文件 在out\target\product\project\obj\KERNEL_OBJ\.config中可以看到 # CONFIG_MTD_LPDD ...

  8. Cheatsheet: 2016 03.01 ~ 03.31

    JAVA Quick Java 8 or Java 7 Dev Environments With Docker Printing arrays by hacking the JVM Mobile H ...

  9. 纯硬盘安装Kali 无需U盘

    工具: EasyBCD 安装后启动,然后依次点击 添加新条目 >> NeoGrub >> 安装 然后如下图 点击配置,然后弹出一个记事本窗口,先最小化.进行如下操作: 1.拷贝 ...

  10. 微信小程序-基础内容组件

    icon 图标 示例: <view class="group"> <block wx:for="{{iconSize}}"> <i ...