多行溢出隐藏显示省略号功能的JS实现
在页面重构中,经常需要将过多的内容隐藏而显示部分。在单行文本中实现非常简单,但是在多行文本中,则需要根据实际选择不同的方式。
用CSS实现多行溢出隐藏的代码非常简单,但是兼容性也相对较低。
1 display: -webkit-box; 2 display: -moz-box; 3 white-space: pre-wrap; 4 word-wrap: break-word; 5 overflow: hidden; 6 text-overflow: ellipsis; 7 -webkit-box-orient: vertical; 8 -webkit-line-clamp:2; /*显示行数*/
这不是我们这次需要讲解的重点。
这次的关注点在于如何用JS来实现隐藏过多内容,用省略号替换显示的功能。
1. 一段需要隐藏的文本
1 <body> 2 <div class="common"> 3 <h2>example</h2> 4 <div class = "demo"> 5 <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> 6 </div> 7 </div> 8 <script type="text/javascript" src="js/common.js"></script> 9 </body>
JS调用
1 window.onload = function(){ 2 var text = document.getElementById("overflowhidden"); 3 var str = text.innerHTML; 4 window.onresize = function(){ 5 overflowhidden("overflowhidden",3,str); 6 } 7 overflowhidden("overflowhidden",3,str); 8 }
2. JS处理
JS处理的基本思路是获取到文本中设置的line-height属性。在获取到相关属性后,根据传入的显示行数来计算整个文本的高度。然后根据文本内容撑开的高度是否大于计算得到的文本高度来判断是否需要溢出处理。
i. 脑抽的做法
1 var overflowhidden = function(id, rows, str){ 2 var text = document.getElementById(id); 3 var style = getCSS(text); 4 var lineHeight = style["line-height"]; //获取到line-height样式设置的值 必须要有 5 var at = rows*parseInt(lineHeight); //计算包含文本的div应该有的高度 6 var tempstr = str; //获取到所有文本 7 text.innerHTML = tempstr; //将所有文本写入html中 8 var len = tempstr.length; 9 var i = 0; 10 if(text.offsetHeight <= at){ //如果所有文本在写入html后文本没有溢出,那不需要做溢出处理 11 /*text.innerHTML = tempstr;*/ 12 } 13 else { //否则 一个一个字符添加写入 不断判断写入后是否溢出 14 var temp = ""; 15 text.innerHTML = temp; 16 while(text.offsetHeight <= at){ 17 temp = tempstr.substring(0, i+1); 18 i++; 19 text.innerHTML = temp; 20 } 21 var slen = temp.length; 22 tempstr = temp.substring(0, slen-1); 23 len = tempstr.length 24 text.innerHTML = tempstr.substring(0, len-3) +"..."; //替换string后面三个字符 25 text.height = at +"px"; //修改文本高度 为了让CSS样式overflow:hidden生效 26 } 27 28 }
实现结果:
效果看起来很友好,如果不考虑跑疯了的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的次数相对而言较少。但是只能够满足设置的行数要求,在最后一行可能会有大面积的空白。
总结:
所以该如何改进?
转载于:https://www.cnblogs.com/li-lanie/p/5960625.html
多行溢出隐藏显示省略号功能的JS实现相关推荐
- 文本CSS多行溢出隐藏显示省略号
处理动态文本超长问题: 如下图,显然不符合美观视觉 此时我们可以这样写,文字不换行溢出显示省略号: {white-space: nowrap;text-overflow: ellipsis;overf ...
- 单行、多行溢出隐藏显示省略号(解决纯数字、纯英文会失效问题)
单行溢出隐藏: width:300px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出隐藏: displa ...
- css单行、多行文本溢出隐藏显示省略号
单行文本溢出隐藏 overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 文本溢出时发生的事,ellipsis表示用省略号代替溢出的文本 white ...
- 全局mixin封装文本溢出隐藏显示省略号
全局mixin封装文本溢出隐藏显示省略号 @mixin ellipsis2($line) {display: -webkit-box;overflow: hidden;text-overflow: e ...
- 单行文字溢出隐藏显示省略号
单行文字溢出隐藏显示省略号 1. 让换行的文字强制在一行显示.属性 white-space: nowrap; 2. 溢出的部分隐藏.overflow: hidden: 3. 文字溢出显示用省略号. t ...
- 实现一行或多行文字溢出隐藏显示省略号
1.css控制文字只显示一行,超出部分显示省略号 例如:1行后省略 <style> p{ width:300px; overflow:hidden; white-space:nowrap; ...
- css文本溢出隐藏显示省略号
一.单行文本显示省略号 1.先强制文本一行内显示 white-space:nowrap(不换行); 2.超出部分影藏 overflow:hidden; 3.用省略号代替超出的部分 text-overf ...
- html5文本超过指定行数隐藏显示省略号
这个很简单,直接贴代码就好了 HTML <span class="name">博客园是一个面向开发者的知识分享社区.自创建以来,博客园一直致力并专注于为开发者打造一个纯 ...
- 文本溢出隐藏显示省略号失效
之前百试百灵的代码,在这次却不生效了,找了半天都没找到失效原因,唉,惆怅. 附上之前的代码: overflow : hidden; text-overflow: ellipsis; display: ...
最新文章
- 从0开始搭建坚不可摧的Web系统主流架构
- Devstack配置负载均衡,负载均衡版本V2
- windows免输密码登录
- 小机箱的评估,立人 vs Jobs机箱
- 你必须知道的10个提高Canvas性能技巧
- C语言指针和链表的体会
- DNS服务器详解--------基础篇
- 智能窗帘研究制作_基于51单片机智能窗帘的研究与设计
- mysql memcached 使用场景_memcache 应用场景
- 腾讯专利多大吓人,专利之王,一点都不过分
- 风控扫盲:巴塞尔下的分池与量化风控岗
- 何时适合进行自动化测试?(上)
- fatal error C1010: 在查找预编译头时遇到意外的文件结尾
- 开元酒店在中国的签约及在营酒店规模正式超过600家
- 计算机类核心期刊投稿的一些资料汇总
- [SSM]报错500:org.springframework.dao.DataIntegrityViolationException
- 市面上哪款输入法最好用,对比出结论
- linux禁用笔记本键盘,禁用笔记本键盘 Linux
- Windows 10 家庭版在忘记旧密码的情况下,如何重置密码
- [转]现代密码学实践指南
热门文章
- 我的世界服务器无限凋零,我的世界:无法被完全隐形的六种生物,凋零:能不能给点面子?...
- MySQL 语句大全
- “驱动人生”利用高危漏洞传播病毒
- 基于AI深度学习的缺陷检测系统
- 2023软件工程毕设题目最新
- Atitit 互联网之道 1.1. 互联网	1 2. 互联网经历了三个时代,门户时代、搜索/社交时代、大互联网时代	1 2.1. Web2.0.搜索/社交时代(Web 2.0)	2 2.2. Web
- Open3d GUI
- 将照片按顺序制作成PDF
- Jenkins+Kubernetes+Docker实现微服务持续集成
- 【原创】建立与保持时间裕量详细分析