JS文本中间显示省略号
2018-06-24 01:18:29来源:未知 阅读 ()
众所周知,文本溢出显示省略号用CSS就可以:
单行文本:
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display:block;
多行文本:
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
如果想中间显示省略号呢??
现在需求是,一段文本很长,但最后有一个关键词很重要,而且改关键词有括号括起来的,需要显示出来,所以如果文本过长,不单只做省略号处理,还要把括号里面的内容显示出来。
// 中间显示省略号,截取显示括号内容 var str = $(".text").text(); var last = 0; var all = str.length; var fisrt = str.substring(0,6); // 没有中文括号( if (str.lastIndexOf('(') == -1) { // 也没有英文括号( if (str.lastIndexOf('(') == -1) { last = all - 5; }else{ // 有英文括号(,就从英文括号开始截取 last = str.lastIndexOf('('); } }else{ last = str.lastIndexOf('('); } // 如果长度大于13个字符才显示省略号 if (all > 13) { $(".text").text(fisrt+" ... "+str.substring(last,all)); }
上面的代码意思是:如果文本长度大于13个字符、文本内包含中文或英文括号就会截取括号到最后一个字符的内容,默认截取前6个字符跟省略号...拼接起来,得到最终的中间省略号,前面6个字,后显示括号内容的效果。
最后:
网上看了好像css没有显示前面跟后面并且中间显示省略号的属性,所以用js截取拼接得到对应的效果。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:js关于密码框强弱度的提示
- javascript特殊文本输入框网页特效 2020-03-16
- js调用刷新界面的几种方式 2020-03-05
- 鼠标悬浮停留三秒后自动显示大图js代码 2020-02-21
- 鼠标放在图片上显示大图的JS代码 2020-02-20
- JS获取当前地理位置的方法 2020-01-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash