一阵做需求时，有个小功能实现起来废了点脑细胞，觉得可以记录一下。

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

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

实现思路

1. 获取标题盒子的真实宽度, 我这里用的是clientWidth；
2. 获取文本内容所占的实际宽度；
3. 根据文字的大小计算出每个文字所占的宽度；
4. 判断文本内容的实际宽度是否超出了标题盒子的宽度；
5. 通过文字所占的宽度累加之和与标题盒子的宽度做对比，计算出要截取位置的索引；
6. 同理，文本尾部的内容需要翻转一下，然后计算索引，截取完之后再翻转回来；

代码

html代码

<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大佬分享的文章，我这里就直接把代码搬过来用吧, 想了解的掘友可以直接滑到文章末尾查看。

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

 // 标题盒子dom
const 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文件，复制上面代码就可以了。

下面记录下从社区内学到的相关知识：

1. js判断文字被溢出隐藏的几种方法;
2. JS获取字符串长度的几种常用方法，汉字算两个字节;

1、 js判断文字被溢出隐藏的几种方法

1. Element-plus这个UI框架中的表格组件实现的方案。

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

2. 创建一个隐藏的div模拟实际宽度

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

function getDomDivWidth(dom) {
    const elementWidth = dom.clientWidth;
    const tempElement = document.createElement('div');
    const style = window.getComputedStyle(dom, null)
    const { left, right } = getPadding(dom); // 这里我写的有点重复了，可以优化
    tempElement.style.cssText = `
        position: absolute;
        top: -9999px;
        left: -9999px;
        white-space: nowrap;
        padding-left:${style.paddingLeft};
        padding-right:${style.paddingRight};
        font-size: ${style.fontSize};
        font-family: ${style.fontFamily};
        font-weight: ${style.fontWeight};
        letter-spacing: ${style.letterSpacing};
    `;
    tempElement.textContent = dom.textContent;
    document.body.appendChild(tempElement);
    const obj = {
        status: tempElement.clientWidth + right + left > elementWidth,
        width: elementWidth - left - right
    }
    document.body.removeChild(tempElement);
    return obj;
}

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;
};

作者：娜个小部呀
链接：https://juejin.cn/post/7329967013923962895

文分享自华为云社区《JavaScript 里三个点 ... 的用法-云社区-华为云》，作者： Jerry Wang 。

静止参数

使用 rest 参数，我们可以将任意数量的参数收集到一个数组中，然后用它们做我们想做的事情。引入了其余参数以减少由参数引起的样板代码。

function myFunc(a, b, ...args) {

console.log(a); // 22

console.log(b); // 98

console.log(args); // [43, 3, 26]

};

myFunc(22, 98, 43, 3, 26);

在 myFunc 的最后一个以 ...为前缀的参数中，这将导致所有剩余的参数都放在 javascript 数组中。

rest 参数收集所有剩余的参数，因此在最后一个参数之前添加 rest 参数是没有意义的。其余参数必须是最后一个形参。

rest 参数可以解构（仅限数组），这意味着它们的数据可以解包为不同的变量。

function myFunc(...[x, y, z]) {

return x * y* z;

}

myFunc(1) // NaN

myFunc(1, 2, 3) // 6

myFunc(1, 2, 3, 4) // 6 (fourth parameter is not destructured)

点差运算符

展开运算符用于将可迭代对象（如数组）的元素扩展到可以容纳多个元素的位置。

function myFunc(x, y, ...params) { // used rest operator here

console.log(x);

console.log(y);

console.log(params);

}

var inputs = ["a", "b", "c", "d", "e", "f"];

myFunc(...inputs); // used spread operator here

// "a"

// "b"

// ["c", "d", "e", "f"]

一直有多种组合数组的方法，但是扩展运算符提供了一种用于组合数组的新方法：

const featured = ['Deep Dish', 'Pepperoni', 'Hawaiian'];

const specialty = ['Meatzza', 'Spicy Mama', 'Margherita'];

const pizzas = [...featured, 'veg pizza', ...specialty];

console.log(pizzas); // 'Deep Dish', 'Pepperoni', 'Hawaiian', 'veg pizza', 'Meatzza', 'Spicy Mama', 'Margherita'

使用扩展运算符，现在可以使用比 Object.assign（） 更短的语法进行浅克隆（不包括原型）或合并对象。

var obj1 = { foo: 'bar', x: 42 };

var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };

// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };

// Object { foo: "baz", x: 42, y: 13 }

总结

当我们在代码中看到三个点 （...） 时，它要么是 rest 参数，要么是展开运算符。

有一个简单的方法来区分它们：

• 当三个点 （...） 位于函数参数的末尾时，它是“rest 参数”并将参数列表的其余部分收集到一个数组中。
• 当三个点 （...） 出现在函数调用或类似函数中时，它被称为“扩展运算符”并将数组扩展为 list.

点击下方关注，第一时间了解华为云新鲜技术~

华为云博客_大数据博客_AI博客_云计算博客_开发者中心-华为云

置文字超长用省略号显示的css代码如下:

width:50px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis;

但如果前面使用伪代码设置了图片，由于这里使用了

overflow:hidden;

很有可能图片就显示不出来了，此时解决方式可以是添加padding-left

padding-left: 20px

设置的左padding的宽度稍微大于伪代码中设置的图片的宽度