前一阵做需求时，有个小功能实现起来废了点脑细胞，觉得可以记录一下。
产品的具体诉求是：用户点击按钮进入详情页面，详情页内的卡片标题内容过长时，标题的前后两端正常展示，中间用省略号…表示，并且鼠标悬浮后，展示全部内容。
关于鼠标悬浮展示全部内容的代码就不放在这里了，本文主要写关于实现中间省略号…的代码。
实现思路
- 获取标题盒子的真实宽度, 我这里用的是clientWidth；
- 获取文本内容所占的实际宽度；
- 根据文字的大小计算出每个文字所占的宽度；
- 判断文本内容的实际宽度是否超出了标题盒子的宽度；
- 通过文字所占的宽度累加之和与标题盒子的宽度做对比，计算出要截取位置的索引；
- 同理，文本尾部的内容需要翻转一下，然后计算索引，截取完之后再翻转回来；
代码
html代码
1<div class="title" id="test">近日，银行纷纷下调大额存单利率，但银行定期存款仍被疯抢。银行理财经理表示：有意向购买定期存款要尽快，不确定利率是否会再降。</div>
css代码: 设置文本不换行，同时设置overflow:hidden让文本溢出盒子隐藏
1.title {
2 width: 640px;
3 height: 40px;
4 line-height: 40px;
5 font-size: 14px;
6 color: #00b388;
7 border: 1px solid #ddd;
8 overflow: hidden;
9
10 white-space: nowrap;
11
12 padding: 0 10px;
13}
javascript代码：
获取标题盒子的宽度时要注意,如果在css样式代码中设置了padding, 就需要获取标题盒子的左右padding值。 通过getComputedStyle属性获取到所有的css样式属性对应的值, 由于获取的padding值都是带具体像素单位的，比如: px，可以用parseInt特殊处理一下。
获取盒子的宽度的代码，我当时开发时是用canvas计算的，但计算的效果不太理想，后来逛社区，发现了嘉琪coder大佬分享的文章，我这里就直接把代码搬过来用吧, 想了解的掘友可以直接滑到文章末尾查看。
判断文本内容是否超出标题盒子
1
2const dom = document.getElementById('test');
3
4
5function getPadding(el) {
6 const domCss = window.getComputedStyle(el, null);
7 const pl = Number.parseInt(domCss.paddingLeft, 10) || 0;
8 const pr = Number.parseInt(domCss.paddingRight, 10) || 0;
9 console.log('padding-left:', pl, 'padding-right:', pr);
10 return {
11 left: pl,
12 right: pr
13 }
14}
15
16function checkLength(dom) {
17
18 const range = document.createRange();
19
20
21 range.setStart(dom, 0),
22 range.setEnd(dom, dom.childNodes.length);
23
24
25 let rangeWidth = range.getBoundingClientRect().width;
26
27
28 const offsetWidth = rangeWidth - Math.floor(rangeWidth);
29 if (offsetWidth < 0.001) {
30 rangeWidth = Math.floor(rangeWidth);
31 }
32
33
34 const { left, right } = getPadding(dom);
35 const paddingWidth = left + right;
36
37
38
39 return {
40 status: paddingWidth + rangeWidth > dom.clientWidth,
41 width: dom.clientWidth - paddingWidth
42 };
43}
通过charCodeAt返回指定位置的字符的Unicode编码, 返回的值对应ASCII码表对应的值，0-127包含了常用的英文、数字、符号等，这些都是占一个字节长度的字符，而大于127的为占两个字节长度的字符。
截取和计算文本长度
1
2function calcTextLength(text, width) {
3 let realLength = 0;
4 let index = 0;
5 for (let i = 0; i < text.length; i++) {
6 charCode = text.charCodeAt(i);
7 if (charCode >= 0 && charCode <= 128) {
8 realLength += 1;
9 } else {
10 realLength += 2 * 14;
11 }
12
13 if (realLength >= width) {
14 index = i;
15 break;
16 }
17 }
18 return index;
19}
20
21
22function setTextContent(text) {
23 const { status, width } = checkLength(dom);
24 let str = '';
25 if (status) {
26
27 let reverseStr = text.split('').reverse().join('');
28
29
30 const leftTextIndex = calcTextLength(text, width);
31 const rightTextIndex = calcTextLength(reverseStr, width);
32
33
34 reverseStr = reverseStr.substring(0, rightTextIndex);
35 reverseStr = reverseStr.split('').reverse().join('');
36
37
38 str = `${text.substring(0, leftTextIndex)}...${reverseStr}`;
39 } else {
40 str = text;
41 }
42 dom.innerHTML = str;
43}
最终实现的效果如下：
上面就是此功能的所有代码了，如果想要在本地试验的话，可以在本地新建一个html文件，复制上面代码就可以了。
下面记录下从社区内学到的相关知识：
- js判断文字被溢出隐藏的几种方法;
- JS获取字符串长度的几种常用方法，汉字算两个字节;
1、 js判断文字被溢出隐藏的几种方法
1. Element-plus这个UI框架中的表格组件实现的方案。
通过document.createRange和document.getBoundingClientRect()这两个方法实现的。也就是我上面代码中实现的checkLength方法。
2. 创建一个隐藏的div模拟实际宽度
通过创建一个不会在页面显示出来的dom元素，然后把文本内容设置进去，真实的文本长度与标题盒子比较宽度，判断是否被溢出隐藏了。
1function getDomDivWidth(dom) {
2 const elementWidth = dom.clientWidth;
3 const tempElement = document.createElement('div');
4 const style = window.getComputedStyle(dom, null)
5 const { left, right } = getPadding(dom);
6 tempElement.style.cssText = `
7 position: absolute;
8 top: -9999px;
9 left: -9999px;
10 white-space: nowrap;
11 padding-left:${style.paddingLeft};
12 padding-right:${style.paddingRight};
13 font-size: ${style.fontSize};
14 font-family: ${style.fontFamily};
15 font-weight: ${style.fontWeight};
16 letter-spacing: ${style.letterSpacing};
17 `;
18 tempElement.textContent = dom.textContent;
19 document.body.appendChild(tempElement);
20 const obj = {
21 status: tempElement.clientWidth + right + left > elementWidth,
22 width: elementWidth - left - right
23 }
24 document.body.removeChild(tempElement);
25 return obj;
26}
3. 创建一个block元素来包裹inline元素
这种方法是在UI框架acro design vue中实现的。外层套一个块级(block)元素，内部是一个行内(inline)元素。给外层元素设置溢出隐藏的样式属性，不对内层元素做处理，这样内层元素的宽度是不变的。因此，通过获取内层元素的宽度和外层元素的宽度作比较，就可以判断出文本是否被溢出隐藏了。
1
2<div class="title" id="test">
3 <span class="content">近日，银行纷纷下调大额存单利率，但银行定期存款仍被疯抢。银行理财经理表示：有意向购买定期存款要尽快，不确定利率是否会再降。</span>
4</div>
5
6
7const content = document.querySelector('.content');
8function getBlockDomWidth(dom) {
9 const { left, right } = getPadding(dom);
10 console.log(dom.clientWidth, content.clientWidth)
11 const obj = {
12 status: dom.clientWidth < content.clientWidth + left + right,
13 width: dom.clientWidth - left - right
14 }
15 return obj;
16}
4. 使用canvas中的measureText方法和TextMetrics对象来获取元素的宽度
通过Canvas 2D渲染上下文(context)可以调用measureText方法，此方法会返回TextMetrics对象，该对象的width属性值就是字符占据的宽度，由此也能获取到文本的真实宽度，此方法有弊端，比如说兼容性，精确度等等。
1
2function getTextWidth(text, font = 14) {
3 const canvas = document.createElement("canvas");
4 const context = canvas.getContext("2d")
5 context.font = font
6 const metrics = context.measureText(text);
7 return metrics.width
8}
2、JS获取字符串长度的几种常用方法
1. 通过charCodeAt判断字符编码
通过charCodeAt获取指定位置字符的Unicode编码，返回的值对应ASCII码表对应的值，0-127包含了常用的英文、数字、符号等，这些都是占一个字节长度的字符，而大于127的为占两个字节长度的字符。
1function calcTextLength(text) {
2 let realLength = 0;
3 for (let i = 0; i < text.length; i++) {
4 charCode = text.charCodeAt(i);
5 if (charCode >= 0 && charCode <= 128) {
6 realLength += 1;
7 } else {
8 realLength += 2;
9 }
10 }
11 return realLength;
12}
2. 采取将双字节字符替换成”aa”的做法，取长度
1function getTextWidth(text) {
2 return text.replace(/[^\x00-\xff]/g,"aa").length;
3};
参考文章
4. canvas绘制字体偏上不居中问题、文字垂直居中后偏上问题、measureText方法和TextMetrics对象