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

用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. nginx安装及负载均衡配置

    Nginx (“engine x”) 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. Nginx 是由 Igor Sysoev 为俄罗斯访问量第二 ...

  2. Handler 、 Looper 、Message

    分析: Looper:prepare和loop public static final void prepare() { if (sThreadLocal.get() != null) { throw ...

  3. wcscpy_s与wcsncpy

    今天运行以下代码时一直出错 void Foo(const wchar_t* lpch, int len) { ... wchar_t *str = ]; wcscpy_s(str, len, lpch ...

  4. String高效编程优化（Java）

    1, substring截取超大字符串可能造成的“内存泄漏” 2,+ 操作符的优化和局限 3,StringBuilder和StringBuffer 4,split和StringTokenizer做简单 ...

  5. 2.用vs2015创建Dotnet Core的mvc项目

    如果你正确安装DotNetCore.1.0.1-VS2015Tools.Preview2.0.2,将会看到 就是第二个选项 ASP.NET Core Web Application 选择第三个,第一次 ...

  6. 蚁群算法简介(part 1：蚁群算法之绪论)

    群算法是Marco Dorigo在1992年提出的一种优化算法,该算法受到蚂蚁搜索食物时对路径的选择策略的启示.蚁群算法作为群体智能算法的一种利用分布式的种群搜索策略来寻找目标函数的最优解.蚁群算法与 ...

  7. 让PictureBox支持URL显示图片

    [ToolboxItem(true)] public class PictureBoxURL : PictureBox { private string _url = ""; pu ...

  8. touch — 设定文件的访问和修改时间

    PHP touch 设定文件的访问和修改时间 touch (PHP 4, PHP 5) touch — 设定文件的访问和修改时间 说明 bool touch ( string $filename [, ...

  9. redis安装

    参考redis.io 安装步骤 下载,编译reids $ wget http://download.redis.io/releases/redis-3.0.6.tar.gz $ tar xzf red ...

  10. Express+mysql的博客（1）

    学了东西一定要自己上手试过才知道是不是真的会了.一直想练练node的使用,本来也没有什么好想法的,经同学提醒了一下,发现其实我可以用node写一个博客.我同学说工作量会非常之大╮(╯_╰)╭那也得先试 ...