分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

JS文本中间显示省略号

发布时间:2023-09-06 01:37责任编辑:傅花花关键词:暂无标签

众所周知,文本溢出显示省略号用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截取拼接得到对应的效果。

JS文本中间显示省略号

原文地址:https://www.cnblogs.com/zhengshize/p/8297612.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved