点击查看代码
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. C++设计模式 - 享元模式(Flyweight)

    对象性能模式 面向对象很好地解决了"抽象"的问题,但是必不可免地要付出一定的代价.对于通常情况来讲,面向对象的成本大都可以忽略不计.但是某些情况,面向对象所带来的成本必须谨慎处理. ...

  2. MySQL数据库维护和改善性能

    备份数据   由于MySQL数据库是基于磁盘的文件,普通的备份系统和例程就能备份MySQL的数据.但是,由于这些文件总是处于打开和使用状态,普通的文件副本备份不一定总是有效.下面列出这个问题的可能解决 ...

  3. #矩阵树定理,高斯消元#洛谷 4111 [HEOI2015]小 Z 的房间

    题目 分析 题目要求生成树个数,求出基尔霍夫矩阵后高斯消元, 但是这里模数不是质数,所以要辗转相除法 代码 #include <cstdio> #include <cctype> ...

  4. 网站优化之robots.txt

    本文于2015年底完成,发布在个人博客网站上. 考虑个人博客因某种原因无法修复,于是在博客园安家,之前发布的文章逐步搬迁过来. 在查询favicon.ico相关的资料时,无间中看到了robots.tx ...

  5. Seaborn调色盘设置

    调色盘设置 设置调色 color_palette()设置调色盘,返回一个调色盘的颜色列表,默认6种颜色:deep, muted, bright, pastel, dark, colorblind. s ...

  6. Linux Ubuntu配置国内源

    配置国内源 因为众所周知的原因,国外的很多网站在国内是访问不了或者访问极慢的,这其中就包括了Ubuntu的官方源. 所以,想要流畅的使用apt安装应用,就需要配置国内源的镜像. 市面上Ubuntu的国 ...

  7. Python设计模式----3.单例模式

    单例模式:主要目的是确保某一个类只有一个实例存在 代码: class A(): def __new__(self, *args, **kwargs): if not hasattr(self, 'na ...

  8. 前端vue监听activeMQ消息后端推送消息--实战

    需求 : 工厂员工完成某道工序后,需要将消息推送给 检查人员 也可以使用 WebSockets ,前端更容易实现 思路: 使用activeMQ推送消息,前端实时接收消息 实现 : 1.基于spring ...

  9. Linux之openssl实现私有CA

    一.简介 Centos7.9通过openssl工具构建一个私有的CA,用于颁发证书. 验证私有CA为httpd应用签署证书 二.构建私有CA 1.编辑CA的配置文件 [root@HLWHOST tls ...

  10. mysql 悲观锁和乐观锁(二)

    前言 简单介绍一下,在mysql 优化系列中会重新介绍,仅仅是留个印象. 悲观锁和乐观锁其实都是概念性问题. 正文 悲观锁: 悲观锁,正如其名,具有强烈的独占和排他特性. 它指的是对数据被外界(包括本 ...