点击查看代码
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. 从0开始学杂项 第四期:隐写分析(3) GIF 图片隐写

    Misc 学习(四) - 隐写分析:GIF 图片隐写 在上一期,我主要讲了讲自己对于隐写分析中的 PNG 图片隐写的一些浅薄理解,这一期我们继续对隐写分析的学习,学习的是图片隐写中的 GIF 图片隐写 ...

  2. 【LGR-069】洛谷 2 月月赛 II & EE Round 2

    目录 前言 洛谷 6101 [EER2]出言不逊 分析 代码 洛谷 6102 [EER2]谔运算 分析 代码 洛谷 6103 [EER2] 直接自然溢出啥事没有 分析 代码 洛谷 6105 [Ynoi ...

  3. 从模型到部署,教你如何用Python构建机器学习API服务

    本文分享自华为云社区<Python构建机器学习API服务从模型到部署的完整指南>,作者: 柠檬味拥抱. 在当今数据驱动的世界中,机器学习模型在解决各种问题中扮演着重要角色.然而,将这些模型 ...

  4. 【FAQ】关于无法判断和区分用户与地图交互手势类型的解决办法

    一. 问题描述 当用户通过缩放手势.平移手势.倾斜手势和旋转手势与地图交互,控制地图移动改变其可见区域时,华为地图SDK没有提供直接获取用户手势类型的API. 二. 解决方案 华为地图SDK的地图相机 ...

  5. 【Insights直播】3D建模服务,快速构建高质量3D模型

    2021年7月15日,HMS Core 6.0面向全球开发者正式上线.华为在HMS Core 6.0中,为开发者开放了一个全新的服务--3D建模服务(3D Modeling Kit),为应用开发者提供 ...

  6. HarmonyOS网络管理开发—Socket连接

      简介 Socket连接主要是通过Socket进行数据传输,支持TCP/UDP/TLS协议. 基本概念 ● Socket:套接字,就是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象. ●  ...

  7. 树模型-CART树

    分类回归树CART CART树是后面所有模型的基础,也是核心树 在ID3算法中我们使用了信息增益来选择特征,信息增益大的优先选择.在C4.5算法中,采用了信息增益比来选择特征,以减少信息增益容易选择特 ...

  8. 简单写一个eventbus

    前言 闲暇之余,简单写一个eventbus. 正文 什么是eventbus? eventbus 是一个开源的发布订阅模式的框架,用于简化程序间不同组件的通信. 它允许不同组件间松耦合通信,组件之间不通 ...

  9. windows server 出现.net 3.5安装不上去

    前言 有人说为什么到了现在还有人用.net 3.5呢?其实我也不用,主要是mmsql安装的时候要用到. 正文 一般我们不同电脑在程序和功能中添加,如果添加不上会弹出一个自动获取的一个过程,这时我们点击 ...

  10. Vue 3 进阶用法:异步组件

    一.代码分割 一个大型前端应用,如果所有代码都放在单一文件,体积会特别大,下载时间长,白屏时间久,用户体验差. 代码分割是一种有效的优化方式.提前把代码切分为多个小块,只下载当前必需的部分,用到哪块下 ...