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.” 当时很懵逼,去网上查了查,发现是 ...
随机推荐
- 到底什么是AQS?面试时你能说明白吗!
写在开头 上篇文章写到CAS算法时,里面使用AtomicInteger举例说明,这个类在java.unit.concurrent.atomic包中,存储的都是一些原子类,除此之外,"java ...
- 体验Semantic Kernel图片内容识别
前言 前几日在浏览devblogs.microsoft.com的时候,看到了一篇名为Image to Text with Semantic Kernel and HuggingFace的文章.这篇文章 ...
- OpenHarmony社区运营报告(2023年4月)
本月快讯 • 2023年4月9日,OpenAtom OpenHarmony(以下简称"OpenHarmony")3.2 Release新版本发布.相比一年前的OpenHarmo ...
- 资深技术笔译总结的这7条建议,看完提PR效率倍增
战码先锋,PR征集令(以下简称"战码先锋")第二期正如火如荼地进行中,涉及OpenAtom OpenHarmony(以下简称"OpenHarmony")主干仓. ...
- Java 编程实例:相加数字、计算单词数、字符串反转、元素求和、矩形面积及奇偶判断
Java如何相加两个数字 相加两个数字 示例 int x = 5; int y = 6; int sum = x + y; System.out.println(sum); // 打印 x + y 的 ...
- Python 内置数据类型详解
内置数据类型 在编程中,数据类型是一个重要的概念. 变量可以存储不同类型的数据,不同类型可以执行不同的操作. Python默认内置了以下这些数据类型,分为以下几类: 文本类型:str 数值类型:int ...
- MySQL基本手册
MySQL配置文件 MySQL软件使用的配置文件名为my.ini,在安装目录下. MySQL常用配置参数: 1.default-character-set:客户端默认字符集. 2.character- ...
- Windows wsl2安装Docker
wsl2的Ubuntu安装好后,就可以安装Docker了. 由于众所周知的原因,国内访问国外的某些网站会访问不了或者访问极慢,Docker的安装网站就在其中. 所以推荐使用阿里的镜像进行安装. 1.使 ...
- Redis之父萨尔瓦多·桑菲利波又名安蒂雷斯
萨尔瓦多·桑菲利波又名安蒂雷斯 个人博客连接 嗨,我是萨尔瓦多·桑菲利波,也被称为安提雷斯, 一位居住在卡塔尼亚的意大利计算机程序员. 我于7年1977月2020日出生在坎波贝洛迪利卡塔. 2022 ...
- MogDB 使用样本数据集Mogila
MogDB 使用样本数据集 Mogila MogDB 提供了一个样本数据集 Mogila,本数据集借鉴了适用于 MySQL 的Sakila 示例数据库.Sakila最初由 MySQL AB 文档团队的 ...