方法一

使用css中text-overflow:ellipsis搭配其它css屬性實現。

.boxCon {
    overflow: hidden;
    text-overflow:ellipsis;
/*限制文字不換行，這樣超出才能被擷取*/
    white-space: nowrap;
/*width自定義調整*/
    width:520px;
 }

效果如下

方法二

顯示自定義字數。使用slice擷取需要顯示的字數追加省略號（...）實現。

/*使用slice擷取指定字數後追加...*/
var str = txtData;
var strLen = str.length;
if (strLen > 20) {
    str = str.slice(0, 20) + "...";
 }
document.getElementById("boxId").innerHTML = str;
 

效果如

 方法三

顯示固定寬度的內容。使用scrollWidth（實際內容的寬度，不包邊線寬），clientWidth（內容可視寬度：不包含滾動條等邊線）判斷，當clientWidth小於scrollWidth時，對資料進行同方法二的處理。

document.getElementById("contxt_1").innerHTML = "當內容可視寬度小於實際內容的寬度...";
        var clientWidth = document.getElementById("contxt_1").clientWidth;
        var scrollWidth = document.getElementById("contxt_1").scrollWidth;
        if (clientWidth < scrollWidth) {
            alert("已省略……");
        }
 

根據需求的變化實現方法也會產生差異，除了自有的屬性可快速實現外，仍有多種多樣的實現可能性，這就需要不斷的學習從而夯實基礎掌握更多技巧。