点击查看代码
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. 01 jQuery初使用

    01 jQuery初使用 jQuery是一个曾经火遍大江南北的一个Javascript的第三方库. jQuery的理念: write less do more. 其含义就是让前端程序员从繁琐的js代码 ...

  2. #并查集,树状数组#洛谷 5610 [Ynoi2013] 大学

    题目 分析 设最大值为 \(mx\),考虑每个数最多被除以 \(\log{mx}\) 次,那么加上树状数组的维护为 \(O(n\log{n}\log{mx})\) 问题就是如何快速找到这些位置,可以对 ...

  3. #Multi-SG#Poj 3537 Crosses and Crosses

    题目 有\(n\)个格子,可以在上面涂黑,连续三个黑色获胜,问先手是否必胜 分析 如果先手选择第\(i\)个格子涂黑,那么后手对于\(i-1,i+1,i-2,i+2\)一旦涂黑必败, 所以如果第\(i ...

  4. #dp#洛谷 4399 [JSOI2008]Blue Mary的职员分配

    题目 分析 设\(dp[i][day][j][k]\)表示当前雇员个数为\(i\), 距离上次发广告时间为\(day\),获得的金钱和声望分别为\(j,k\) 注意\(day\)是\([0\sim 3 ...

  5. Java 异常处理与正则表达式详解,实例演练及最佳实践

    Java 异常 - Try...Catch 在 Java 代码执行期间,可能会发生各种错误,包括程序员编码错误.用户输入错误以及其他不可预料的状况. 当错误发生时,Java 通常会停止并生成错误消息, ...

  6. Seaborn线性关系数据可视化

    regplot() 绘制两个变量的线性拟合图. sns.regplot( x, y, data=None, x_estimator=None, x_bins=None, x_ci='ci', scat ...

  7. 华为运动健康服务Health Kit 6.10.0版本新增功能速览!

    华为运动健康服务(HUAWEI Health Kit)6.10.0 版本新增的能力有哪些? 阅读本文寻找答案,一起加入运动健康服务生态大家庭! 一. 支持三方应用查询用户测量的连续血糖数据 符合申请H ...

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

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

  9. 选择排序的基本实现【数据结构与算法—TypeScript 实现】

    笔记整理自 coderwhy 『TypeScript 高阶数据结构与算法』课程 概念 本质:两两元素相比较,先扫描一遍未排序数列,把未排序的数列中的最小(大)元素,放到数列的已排序的末尾 特性 选择排 ...

  10. 直播预告丨Hello HarmonyOS进阶系列课程重磅来袭,4月27日开播

    为了帮助初识HarmonyOS的开发者快速入门,我们曾推出Hello HarmonyOS系列一共5期课程(传送门:https://developer.huawei.com/consumer/cn/tr ...