点击查看代码
function ellipsisText(longText, displayLength) {
// 确保显示长度至少包含省略号的3个字符
if (displayLength < 3) {
throw new Error('Display length should be at least 3 to accommodate ellipsis.');
} // 计算两侧各应显示的字符数
const sideLength = Math.floor((displayLength - 3) / 2); // 截取并拼接文本
let displayText = longText.slice(0, sideLength) + '...' + longText.slice(-sideLength); // 如果原始文本长度小于等于要显示的长度,则直接返回原始文本
if (longText.length <= displayLength) {
return longText;
} else {
return displayText;
}
} // 使用示例
const longText = "这是一段很长的文字,包含各种字符,英文、数字和中文……";
const displayLength = 20; // 两端各10个字符加上省略号
const result = ellipsisText(longText, displayLength);
console.log(result);

js文字处理两端展示中间省略号的更多相关文章

  1. js文字展示各种滚动效果

    js文字展示各种滚动效果:http://www.dowebok.com/demo/188/

  2. CSS——div内文字的溢出部分用省略号显示

    使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分 ...

  3. js文字向上滚动代码

    js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px;  background:#edfafd; padding-top:2px; ...

  4. js文字颜色闪烁

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. CSS控制文字,超出部分显示省略号

    http://www.daqianduan.com/6179.html <p style="width: 300px;overflow: hidden;white-space: now ...

  6. textillate.js 文字动画

    textillate.js是一款强大的文字插件,若配合animate.css.fittext.lettering一起使用,这样做出来的文字特效很完美. 在线实例 实例演示 使用方法 <div i ...

  7. Js文字特效—文字段逐个变色循环

    自己用来练习的,附上详细注释,如果有和我一样喜欢并想要学习Dom特效创作的朋友,推荐先系统了解Javascript中Html Dom Object部分的内容,包括常用方法及属性. <!DOCTY ...

  8. js 文字预写匹配

    效果图: demo如下: <!DOCTYPE html> <html> <head> <title>文字预写</title> </he ...

  9. html js文字左右滚动插件

    自己写过很多插件,但都是直接嵌入在了工程里,从来没有拿出来单独封装成一个文件过,这是第一次,希望是一个良好的开端. 一个文字过长而可以左右滚动的插件 <!DOCTYPE html> < ...

  10. three.js 文字显示不出来

    试了下使用three.js加载文字,首先是报了一个这样的错误: Cross origin requests are only supported for HTTP.” 当时很懵逼,去网上查了查,发现是 ...

随机推荐

  1. 线上问题分析之java dump文件生成

    一.查看java进程 jps or ps aux | grep java 二.生成dump文件 jmap -dump:live,format=b,file=xxxx.bin 进程ID 三.查看dump ...

  2. OpenHarmony社区运营报告(2023年12月)

      • 截至2023年12月22日,OpenAtom OpenHarmony(简称"OpenHarmony")社区累计超过6700名贡献者,产生26.9万多个PR,2.4万多个St ...

  3. [P4551] 最长异或路径 题解

    过程 手写利用DFS求出每个点到根节点的异或距离 不难得出 xor_dis[x][y]=xor_dis[0][x]^xor_dis[0][y] 于是树上异或问题转换成了Trie上异或问题. 代码 直接 ...

  4. Numpy通用函数及向量化计算

    Python(Cpython)对于较大数组的循环操作会比较慢,因为Python的动态性和解释性,在做每次循环时,必须做数据类型的检查和函数的调度. Numpy为很多类型的操作提供了非常方便的.静态类型 ...

  5. 【FAQ】HarmonyOS SDK 闭源开放能力 —Account Kit

    1.问题描述 实时验证和非实时验证的区别是什么? 解决方案 相同点: "手机号快速验证"和"实时验证"都是为了向用户发起获取手机号信息的请求.最终目的都是为了获 ...

  6. WGAN

    wgan之前, 原始GAN出现了什么问题? https://www.cnblogs.com/Allen-rg/p/10305125.html 判别器越好,生成器梯度消失越严重 一句话概括:最小化第二种 ...

  7. linux 性能自我学习 ———— cpu 快速定位问题 [六]

    前言 主要介绍一下cpu如何快速定位问题. 正文 cpu 的一些性能指标: 1. cpu 使用率 cpu 使用率描述了非空闲时间占总cpu时间的百分比,根据cpu上运行任务的不同,又被分为用户cpu. ...

  8. 在RockyLinux 9.3环境中采用RPM模式部署Oracle 19C

    在RockyLinux 9.3环境中采用RPM模式部署Oracle 19C 用途 在开发数据库系统时,可以验证功能是否与Oracle的表现一致,验证正确性和兼容性 限制 虚拟机安装,CPU 2*4 内 ...

  9. 第 2章Python 爬虫基本库的使用

    第 2章Python 爬虫基本库的使用 爬虫并没有你想象中的复杂,很多初学者一开始就担忧,比如怎么写代码去构造请求,怎么把请求发出去,怎么接收服务器的响应,需不需要学习 TCP/IP 四层模型的每一层 ...

  10. Java Agent 踩坑之 appendToSystemClassLoaderSearch 问题

    简介: 从 Java Agent 报错开始,到 JVM 原理,到 glibc 线程安全,再到 pthread tls,逐步探究 Java Agent 诡异报错. 作者:鲁严波   从 Java Age ...