html字符过长省略号表示js若何实现当文本内容过长时中央显示省略号两头正常展现

产品的详细诉求是：用户点击按钮进入详情页面，详情页内的卡片标题内容过永劫，标题的前后两端正常展示，中间用省略号...表示，并且鼠标悬浮后，展示全部内容。

关于鼠标悬浮展示全部内容的代码就不放在这里了，本文紧张写关于实现中间省略号...的代码。

实现思路获取标题盒子的真实宽度, 我这里用的是clientWidth；获取文本内容所占的实际宽度；根据笔墨的大小打算出每个笔墨所占的宽度；判断文本内容的实际宽度是否超出了标题盒子的宽度；通过笔墨所占的宽度累加之和与标题盒子的宽度做比拟，打算出要截取位置的索引；同理，文本尾部的内容须要翻转一下，然后打算索引，截取完之后再翻转回来；代码

html代码

html字符过长省略号表示js若何实现当文本内容过长时中央显示省略号两头正常展现 SQL

（图片来自网络侵删）

<div class="title" id="test">近日，银行纷纭下调大额存单利率，但银行定期存款仍被疯抢。银行理财经理表示：故意向购买定期存款要尽快，不愿定利率是否会再降。 </div>

css代码: 设置文本不换行，同时设置overflow:hidden让文本溢出盒子隐蔽

.title { width: 640px; height: 40px; line-height: 40px; font-size: 14px; color: #00b388; border: 1px solid #ddd; overflow: hidden; / text-overflow: ellipsis; / white-space: nowrap; / box-sizing: border-box; / padding: 0 10px;}

javascript代码：

获取标题盒子的宽度时要把稳,如果在css样式代码中设置了padding, 就须要获取标题盒子的旁边padding值。
通过getComputedStyle属性获取到所有的css样式属性对应的值, 由于获取的padding值都是带详细像素单位的，比如: px，可以用parseInt分外处理一下。

获取盒子的宽度的代码，我当时开拓时是用canvas打算的，但打算的效果不太空想，后来逛社区，创造了嘉琪coder大佬分享的文章，我这里就直接把代码搬过来用吧, 想理解的掘友可以直接滑到文章末端查看。

判断文本内容是否超出标题盒子

// 标题盒子domconst dom = document.getElementById('test');// 获取dom元素的padding值function getPadding(el) { const domCss = window.getComputedStyle(el, null); const pl = Number.parseInt(domCss.paddingLeft, 10) || 0; const pr = Number.parseInt(domCss.paddingRight, 10) || 0; console.log('padding-left:', pl, 'padding-right:', pr); return { left: pl, right: pr }}// 检测dom元素的宽度，function checkLength(dom) { // 创建一个 Range 工具 const range = document.createRange(); // 设置选中文本的起始和结束位置 range.setStart(dom, 0), range.setEnd(dom, dom.childNodes.length); // 获取元素在文档中的位置和大小信息,这里直接获取的元素的宽度 let rangeWidth = range.getBoundingClientRect().width; // 获取的宽度一样平常都会有多位小数点，判断如果小于0.001的就直接舍掉 const offsetWidth = rangeWidth - Math.floor(rangeWidth); if (offsetWidth < 0.001) { rangeWidth = Math.floor(rangeWidth); } // 获取元素padding值 const { left, right } = getPadding(dom); const paddingWidth = left + right; // status：文本内容是否超出标题盒子； // width: 标题盒子真实能够容纳文本内容的宽度 return { status: paddingWidth + rangeWidth > dom.clientWidth, width: dom.clientWidth - paddingWidth };}

通过charCodeAt返回指定位置的字符的Unicode编码, 返回的值对应ASCII码表对应的值，0-127包含了常用的英文、数字、符号等，这些都是占一个字节长度的字符，而大于127的为占两个字节长度的字符。

截取和打算文本长度

js// 打算文本长度，当长度之和大于即是dom元素的宽度后，返回当前笔墨所在的索引，截取时会用到。 function calcTextLength(text, width) { let realLength = 0; let index = 0; for (let i = 0; i < text.length; i++) { charCode = text.charCodeAt(i); if (charCode >= 0 && charCode <= 128) { realLength += 1; } else { realLength += 2 14; // 14是字体大小 } // 判断长度，为true时终止循环，记录索引并返回 if (realLength >= width) { index = i; break; } } return index;}// 设置文本内容function setTextContent(text) { const { status, width } = checkLength(dom); let str = ''; if (status) { // 翻转文本 let reverseStr = text.split('').reverse().join(''); // 打算旁边两边文本要截取的字符索引 const leftTextIndex = calcTextLength(text, width); const rightTextIndex = calcTextLength(reverseStr, width); // 将右侧字符先截取，后翻转 reverseStr = reverseStr.substring(0, rightTextIndex); reverseStr = reverseStr.split('').reverse().join(''); // 字符拼接 str = `${text.substring(0, leftTextIndex)}...${reverseStr}`; } else { str = text; } dom.innerHTML = str;}

终极实现的效果如下：

上面便是此功能的所有代码了，如果想要在本地试验的话，可以在本地新建一个html文件，复制上面代码就可以了。

下面记录下从社区内学到的干系知识：

js判断笔墨被溢出隐蔽的几种方法;JS获取字符串长度的几种常用方法，汉字算两个字节;1、 js判断笔墨被溢出隐蔽的几种方法1. Element-plus这个UI框架中的表格组件实现的方案。

通过document.createRange和document.getBoundingClientRect()这两个方法实现的。
也便是我上面代码中实现的checkLength方法。

2. 创建一个隐蔽的div仿照实际宽度

通过创建一个不会在页面显示出来的dom元素，然后把文本内容设置进去，真实的文本长度与标题盒子比较宽度，判断是否被溢出隐蔽了。

3. 创建一个block元向来包裹inline元素

这种方法是在UI框架acro design vue中实现的。
外层套一个块级(block)元素，内部是一个行内(inline)元素。
给外层元素设置溢出隐蔽的样式属性，不对内层元素做处理，这样内层元素的宽度是不变的。
因此，通过获取内层元素的宽度和外层元素的宽度作比较，就可以判断出文本是否被溢出隐蔽了。

// html代码<div class="title" id="test"> <span class="content">近日，银行纷纭下调大额存单利率，但银行定期存款仍被疯抢。银行理财经理表示：故意向购买定期存款要尽快，不愿定利率是否会再降。 </span></div>// 创建一个block元向来包裹inline元素const content = document.querySelector('.content');function getBlockDomWidth(dom) { const { left, right } = getPadding(dom); console.log(dom.clientWidth, content.clientWidth) const obj = { status: dom.clientWidth < content.clientWidth + left + right, width: dom.clientWidth - left - right } return obj;}

4. 利用canvas中的measureText方法和TextMetrics工具来获取元素的宽度

通过Canvas 2D渲染高下文(context)可以调用measureText方法，此方法会返回TextMetrics工具，该工具的width属性值便是字符霸占的宽度，由此也能获取到文本的真实宽度，此方法有弊端，比如说兼容性，精确度等等。

// 获取文本长度function getTextWidth(text, font = 14) { const canvas = document.createElement("canvas"); const context = canvas.getContext("2d") context.font = font const metrics = context.measureText(text); return metrics.width}

2、JS获取字符串长度的几种常用方法1. 通过charCodeAt判断字符编码

通过charCodeAt获取指定位置字符的Unicode编码，返回的值对应ASCII码表对应的值，0-127包含了常用的英文、数字、符号等，这些都是占一个字节长度的字符，而大于127的为占两个字节长度的字符。

function calcTextLength(text) { let realLength = 0; for (let i = 0; i < text.length; i++) { charCode = text.charCodeAt(i); if (charCode >= 0 && charCode <= 128) { realLength += 1; } else { realLength += 2; } } return realLength;}

2. 采纳将双字节字符更换成"aa"的做法，取长度

function getTextWidth(text) { return text.replace(/[^\x00-\xff]/g,"aa").length;};