点击查看代码
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. Vue入门笔记一

    <Vue.js项目实战>Guillaume Chau Vue核心功能概述 1.一个响应式的数据系统,能通过轻量级的虚拟DOM引擎和最少的优化工作来自动更新用户界面 2.灵活的视图声明,包括 ...

  2. 5 更换npm为国内镜像

    更改npm为国内镜像 在终端执行. npm set registry http://registry.npmmirror.com 首先, 打开"我的电脑". 找到"c盘中 ...

  3. 你知道什么叫做API、SDK吗?

    链接:https://www.zhihu.com/question/21691705/answer/770586138 API.SDK是什么......... 讲个小故事: 研发人员A开发了软件A,研 ...

  4. SSM框架整合——书籍管理系统

    1.准备工作: 1.1.环境要求 IDEA MySQL 5.7.19 Tomcat 9 Maven 3.6 1.2.数据库设计 创建一个存放书籍数据的数据库表: CREATE DATABASE `ss ...

  5. Qt操作sqlite数据库

    代码讲解: 1.检查数据库文件是否存在,如果不存在就创建数据库文件 2.创建 person 表(等下的操作就是操作这个表) 3.查询出 person 表中所有的数据,并显示出来 Pro 文件 添加 S ...

  6. 资源池化支持同城dorado双集群切换(非日志合一)

    资源池化支持同城 dorado 双集群部署方式:dd 模拟(手动部署+无 cm).cm 模拟(手动部署 dd 模拟+有 cm).磁阵(手动部署).集群管理工具部署 1.集群间切换 基于<资源池化 ...

  7. ContOS7搭建RAID-0磁盘阵列

    RAID-0条带数据: 优点:2块硬盘同时在写数据,而且各写各的不影响,速度较快:性能提升2倍(理论): 缺点:服务器硬盘特别容易损坏,一点损坏一个,其余不能用:没有容错性:服务器用的不多,都是配合使 ...

  8. 推荐几款Vue后台管理系统的框架,以便备用

    推荐几款Vue后台管理系统的框架,以便备用 Vue.js 是一个目前比较流行的前端框架,在业界也算很有名气,今天这里为大家罗列一下基于Vue的后端管理的框架. 使用这些框架你会发现它包括了我们常用的路 ...

  9. nohup训练pytorch模型时的报错以及tmux的简单使用

    问题: 在使用nohup命令后台训练pytorch模型时,关闭ssh窗口,有时会遇到下面报错: WARNING:torch.distributed.elastic.agent.server.api:R ...

  10. 哨兵的多个核心底层原理的深入解析(包含slave选举算法)

    一.sdown和odown转换机制sdown和odown两种失败状态 sdown是主观宕机,就一个哨兵如果自己觉得一个master宕机了,那么就是主观宕机odown是客观宕机,如果quorum数量的哨 ...