点击查看代码
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. 使用OHOS SDK构建mimalloc

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

  2. 掌握 C# 变量:在代码中声明、初始化和使用不同类型的综合指南

    C# 变量 变量是用于存储数据值的容器. 在 C# 中,有不同类型的变量(用不同的关键字定义),例如: int - 存储整数(没有小数点的整数),如 123 或 -123 double - 存储浮点数 ...

  3. C# Lock的用法

    当我们使用线程的时候,效率最高的方式当然是异步,即各个线程同时运行,其间不相互依赖和等待.但当不同的线程都需要访问某个资源的时候,就需要同步机制了,也就是说当对同一个资源进行读写的时候,我们要使该资源 ...

  4. 自动编号工具类:NumAutoUtils详解

    在软件开发中,经常需要生成唯一的编号,例如订单号.发票号.实验编号等.为了简化这一过程,本文将介绍一个Java工具类NumAutoUtils,它可以帮助我们生成带有前缀和日期的自动编号. 概述 Num ...

  5. 高可用之战:Redis Sentinal(哨兵模式)

    ★ Redis24篇集合 1 背景 在我们的<Redis高可用之战:主从架构>篇章中,介绍了Redis的主从架构模式,可以有效的提升Redis服务的可用性,减少甚至避免Redis服务发生完 ...

  6. 1、android Studio 打Jar包

    1.创建一个AndroidStudio 工程 注意下面这个Package Name 2.进入Android Studio工程中 选择Project Flies 选项 然后找到 app->src- ...

  7. 打造美团外卖新体验,HarmonyOS SDK 持续赋能开发者共赢鸿蒙生态

    从今年 8 月起,所有升级到 HarmonyOS 4 的手机用户在美团外卖下单后,可通过屏幕上的一个"小窗口",随时追踪到"出餐.取餐.送达"等订单状态.这个能 ...

  8. c# 多线程传值注意的地方

    前言 下面介绍多线程传值的几种方式,并说明注意点. 正文 static void Main(string[] args) { SampleTread thead = new SampleTread(1 ...

  9. xml转voc数据集(含分享数据集)

    数据集的链接:行人检测数据集voc数据集(100张) 原始图片和.xml数据目录结构如下: . └── data ├── 003002_0.jpg ├── 003002_0.xml ├── 00300 ...

  10. Webpack中Loader和Plugin的区别?编写Loader,Plugin的思路?

    一.区别 前面两节我们有提到Loader与Plugin对应的概念,先来回顾下 loader 是文件加载器,能够加载资源文件,并对这些文件进行一些处理,诸如编译.压缩等,最终一起打包到指定的文件中 pl ...