js实现文本内容过长中间显示省略号...两端正常展示

思路：

        1、获取标题盒子的真实宽度, 我这里用的是clientWidth

        2、获取文本内容所占的实际宽度；

        3、根据文字的大小计算出每个文字所占的宽度；

        4、判断文本内容的实际宽度是否超出了标题盒子的宽度；

        5、通过文字所占的宽度累加之和与标题盒子的宽度做对比，计算出要截取位置的索引；

        6、文本尾部的内容需要翻转一下，然后计算索引，截取完之后再翻转回来；

代码：

        1、html代码

<div class="title" id="test">js实现文本内容过长时中间显示省略号...两端正常展示，js实现文本内容过长时中间显示省略号...两端正常展示。</div>

        2、css代码

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

3、JavaScript代码

//判断文本内容是否超出标题盒子
 
// 标题盒子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
    };
}

//截取和计算文本长度


// 计算文本长度，当长度之和大于等于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;
}