点击查看代码
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. 简单的Git/GitHub

    什么是Git/GitHub Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. 版本控制(Revision control)是一种在开发的过程中用于管理我们对文件.目录或工 ...

  2. #倍增,floyd#CF147B Smile House

    题目 求一张有向图的最小正环(环上结点数最小) 分析 有环当且仅当 \(f[i][i]\) 为正数, 那么考虑跑 \(n\) 次 floyd 直接转移,时间复杂度为 \(O(n^4)\) 然而没必要这 ...

  3. 使用OHOS SDK构建assimp

    参照OHOS IDE和SDK的安装方法配置好开发环境. 从github下载源码. 执行如下命令: git clone https://github.com/assimp/assimp.git 进入源码 ...

  4. 深度剖析 Spring 框架在 Java 应用开发中的优势与应用

    Spring 是用于企业 Java 应用程序开发的最流行的应用程序开发框架.全球数百万开发人员使用 Spring Framework 创建高性能.易于测试和可重用的代码.Spring Framewor ...

  5. 数据库操作入门:PyMongo 和 MongoDB 的基本用法

    MongoDB MongoDB是一种流行的NoSQL数据库,它将数据存储在类似JSON的文档中,使数据库非常灵活和可扩展 PyMongo Python需要一个MongoDB驱动程序来访问MongoDB ...

  6. HMS Core 3D Engine助您实现逼真3D渲染效果,构筑大型3D数字世界

    HMS Core 3D Engine是一款高性能.高画质.高可靠的实时3D引擎,旨在帮助开发者制作高品质的3D应用.3D Engine将为您提供可编程渲染管线,多维粒子系统,3D角色与动画,超大地形地 ...

  7. WAF 原理入门

    WAF 入门 WAF 功能 WAF 全称叫 Web Application Firewall,和传统防火墙的区别是,它是工作在应用层的防火墙,主要对 web 请求/响应进行防护.那么 WAF 有什么功 ...

  8. EZHTTP(一键安装Nginx Apache PHP MySQL Memcached Pureftpd)安装【测试ing】

    EZHTTP(一键安装Nginx Apache PHP MySQL Memcached Pureftpd)安装 [复制链接] 本帖最后由 梁国平 于 2014-2-11 22:47 编辑 简介     ...

  9. nginx重新整理——————nginx 的设计模型[八]

    前言 简单介绍一下nginx的设计模型,对我们设计程序还是有一定帮助的. 正文 这里先列一下模型哈,后面有深入篇,介绍的比较清楚. nginx 的处理模型: nginx 进程模型: 可以看到下面列出了 ...

  10. 我用这10招,能减少了80%的BUG

    前言 对于大部分程序员来说,主要的工作时间是在开发和修复BUG. 有可能修改了一个BUG,会导致几个新BUG的产生,不断循环. 那么,有没有办法能够减少BUG,保证代码质量,提升工作效率? 答案是肯定 ...