js文字处理两端展示中间省略号
点击查看代码
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文字处理两端展示中间省略号的更多相关文章
- js文字展示各种滚动效果
js文字展示各种滚动效果:http://www.dowebok.com/demo/188/
- CSS——div内文字的溢出部分用省略号显示
使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分 ...
- js文字向上滚动代码
js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px; background:#edfafd; padding-top:2px; ...
- js文字颜色闪烁
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS控制文字,超出部分显示省略号
http://www.daqianduan.com/6179.html <p style="width: 300px;overflow: hidden;white-space: now ...
- textillate.js 文字动画
textillate.js是一款强大的文字插件,若配合animate.css.fittext.lettering一起使用,这样做出来的文字特效很完美. 在线实例 实例演示 使用方法 <div i ...
- Js文字特效—文字段逐个变色循环
自己用来练习的,附上详细注释,如果有和我一样喜欢并想要学习Dom特效创作的朋友,推荐先系统了解Javascript中Html Dom Object部分的内容,包括常用方法及属性. <!DOCTY ...
- js 文字预写匹配
效果图: demo如下: <!DOCTYPE html> <html> <head> <title>文字预写</title> </he ...
- html js文字左右滚动插件
自己写过很多插件,但都是直接嵌入在了工程里,从来没有拿出来单独封装成一个文件过,这是第一次,希望是一个良好的开端. 一个文字过长而可以左右滚动的插件 <!DOCTYPE html> < ...
- three.js 文字显示不出来
试了下使用three.js加载文字,首先是报了一个这样的错误: Cross origin requests are only supported for HTTP.” 当时很懵逼,去网上查了查,发现是 ...
随机推荐
- 01 jQuery初使用
01 jQuery初使用 jQuery是一个曾经火遍大江南北的一个Javascript的第三方库. jQuery的理念: write less do more. 其含义就是让前端程序员从繁琐的js代码 ...
- #并查集,树状数组#洛谷 5610 [Ynoi2013] 大学
题目 分析 设最大值为 \(mx\),考虑每个数最多被除以 \(\log{mx}\) 次,那么加上树状数组的维护为 \(O(n\log{n}\log{mx})\) 问题就是如何快速找到这些位置,可以对 ...
- #Multi-SG#Poj 3537 Crosses and Crosses
题目 有\(n\)个格子,可以在上面涂黑,连续三个黑色获胜,问先手是否必胜 分析 如果先手选择第\(i\)个格子涂黑,那么后手对于\(i-1,i+1,i-2,i+2\)一旦涂黑必败, 所以如果第\(i ...
- #dp#洛谷 4399 [JSOI2008]Blue Mary的职员分配
题目 分析 设\(dp[i][day][j][k]\)表示当前雇员个数为\(i\), 距离上次发广告时间为\(day\),获得的金钱和声望分别为\(j,k\) 注意\(day\)是\([0\sim 3 ...
- Java 异常处理与正则表达式详解,实例演练及最佳实践
Java 异常 - Try...Catch 在 Java 代码执行期间,可能会发生各种错误,包括程序员编码错误.用户输入错误以及其他不可预料的状况. 当错误发生时,Java 通常会停止并生成错误消息, ...
- Seaborn线性关系数据可视化
regplot() 绘制两个变量的线性拟合图. sns.regplot( x, y, data=None, x_estimator=None, x_bins=None, x_ci='ci', scat ...
- 华为运动健康服务Health Kit 6.10.0版本新增功能速览!
华为运动健康服务(HUAWEI Health Kit)6.10.0 版本新增的能力有哪些? 阅读本文寻找答案,一起加入运动健康服务生态大家庭! 一. 支持三方应用查询用户测量的连续血糖数据 符合申请H ...
- HMS Core 3D Engine助您实现逼真3D渲染效果,构筑大型3D数字世界
HMS Core 3D Engine是一款高性能.高画质.高可靠的实时3D引擎,旨在帮助开发者制作高品质的3D应用.3D Engine将为您提供可编程渲染管线,多维粒子系统,3D角色与动画,超大地形地 ...
- 选择排序的基本实现【数据结构与算法—TypeScript 实现】
笔记整理自 coderwhy 『TypeScript 高阶数据结构与算法』课程 概念 本质:两两元素相比较,先扫描一遍未排序数列,把未排序的数列中的最小(大)元素,放到数列的已排序的末尾 特性 选择排 ...
- 直播预告丨Hello HarmonyOS进阶系列课程重磅来袭,4月27日开播
为了帮助初识HarmonyOS的开发者快速入门,我们曾推出Hello HarmonyOS系列一共5期课程(传送门:https://developer.huawei.com/consumer/cn/tr ...