<div class="title" id="test">近日，銀行紛紛下調(diào)大額存單利率，但銀行定期存款仍被瘋搶。銀行理財(cái)經(jīng)理表示：有意向購(gòu)買(mǎi)定期存款要盡快，不確定利率是否會(huì)再降。</div>

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

 // 標(biāo)題盒子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
    }
}
// 檢測(cè)dom元素的寬度，
function checkLength(dom) {
     // 創(chuàng)建一個(gè) Range 對(duì)象
    const range = document.createRange();
    
    // 設(shè)置選中文本的起始和結(jié)束位置
    range.setStart(dom, 0),
    range.setEnd(dom, dom.childNodes.length);
    
    // 獲取元素在文檔中的位置和大小信息,這里直接獲取的元素的寬度
    let rangeWidth = range.getBoundingClientRect().width;
    
    // 獲取的寬度一般都會(huì)有多位小數(shù)點(diǎn)，判斷如果小于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：文本內(nèi)容是否超出標(biāo)題盒子；
    // width: 標(biāo)題盒子真實(shí)能夠容納文本內(nèi)容的寬度
    return {
        status: paddingWidth + rangeWidth > dom.clientWidth,
        width: dom.clientWidth - paddingWidth
    };
}

// 計(jì)算文本長(zhǎng)度，當(dāng)長(zhǎng)度之和大于等于dom元素的寬度后，返回當(dāng)前文字所在的索引，截取時(shí)會(huì)用到。
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是字體大小
        }
        // 判斷長(zhǎng)度，為true時(shí)終止循環(huán)，記錄索引并返回
        if (realLength >= width) {
            index = i;
            break;
        }
    }
    return index;
}

// 設(shè)置文本內(nèi)容
function setTextContent(text) {
    const { status, width } = checkLength(dom);
    let str = '';
    if (status) {
        // 翻轉(zhuǎn)文本
        let reverseStr = text.split('').reverse().join('');
        
        // 計(jì)算左右兩邊文本要截取的字符索引
        const leftTextIndex = calcTextLength(text, width);
        const rightTextIndex = calcTextLength(reverseStr, width);
        
        // 將右側(cè)字符先截取，后翻轉(zhuǎn)
        reverseStr = reverseStr.substring(0, rightTextIndex);
        reverseStr = reverseStr.split('').reverse().join('');
        
        // 字符拼接
        str = `${text.substring(0, leftTextIndex)}...${reverseStr}`;
    } else {
        str = text;
    }
    dom.innerHTML = str;
}

function getDomDivWidth(dom) {
    const elementWidth = dom.clientWidth;
    const tempElement = document.createElement('div');
    const style = window.getComputedStyle(dom, null)
    const { left, right } = getPadding(dom); // 這里我寫(xiě)的有點(diǎn)重復(fù)了，可以優(yōu)化
    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;
}

// html代碼
<div class="title" id="test">
    <span class="content">近日，銀行紛紛下調(diào)大額存單利率，但銀行定期存款仍被瘋搶。銀行理財(cái)經(jīng)理表示：有意向購(gòu)買(mǎi)定期存款要盡快，不確定利率是否會(huì)再降。</span>
</div>

// 創(chuàng)建一個(gè)block元素來(lái)包裹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;
}

// 獲取文本長(zhǎng)度
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
}

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

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