需求：根據容器大小 判斷是否顯示省略號 容器與文本都是隨機變化
問題：由于需求與技術限制，不能使用下面這種方法

> /* 強制不換行 */white-space: nowrap;/* 文字用省略號代替超出的部分 */text-overflow: ellipsis;/* 勻速溢出內容，隱藏 */overflow: hidden;

、

由此根據容器寬度和計算文本寬度來實現

//name 為要顯示的文字 //titleWidth 為計算文本的寬度 傳入文本 文本大小 文本字體 可動態變化 //width為容器大小 可動態變化var namelet titleWidth=this.computeFontSize(str,text.fontSize, text.fontFamily).widthif(titleWidth > width) {//計算每個字的平均寬度let len = titleWidth / str.split('').lengthlet num//這兩種字體偏小，所以比其他字體多取一位 仿宋 微軟雅黑if ((text&&text.fontFamily == 'STFangsong') || (text&&text.fontFamily == 'Microsoft YaHei')) {//根據每個字的平均寬度計算超出容器有幾個字,減掉加省略號num = Math.ceil((titleWidth - width) / len)+1} else {num = Math.ceil((titleWidth - width) / len)+2}let nameTitle=str.split('').slice(0,str.split('').length-num).join('')+'...'name = nameTitle;} else {name=str} computeFontSize(str, size, family) {let spanDom = document.createElement("span");spanDom.style.fontSize = size+'px'; //12pxspanDom.style.fontFamily = family; //'STFangsong'spanDom.innerHTML = str;document.body.append(spanDom);let sizeD = {};sizeD.width = spanDom.offsetWidth;spanDom.remove();return sizeD; }

總結

以上是生活随笔為你收集整理的js根据文字（保存大小，字体）计算文字长度，并根据容器显示省略号的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。