我必須在跨度上檢測省略號，因此我找到了“e.offsetWidth < e.scrollWidth”方法，它適用于短文本或長文本，但我注意到當文本長度接近容器寬度時，省略號在該條件變為真之前出現。
這是一個顯示問題的 JSfiddle：https ://jsfiddle.net/zgowrxbf/23/
有沒有更好的方法來檢測省略號？
編輯：問題似乎只在 Firefox 上，但我的專案必須只支持這個瀏覽器
var offset = document.getElementById("test").offsetWidth;
var scroll = document.getElementById("test").scrollWidth;
var isEllipsis = offset < scroll;
console.log(offset " " scroll " " isEllipsis);#test {
display: block;
width: 180px;
border: 1px solid red;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 5px 10px;
font-family: "Arial", sans-serif;
font-size: 12px;
}<span id="test">test xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>uj5u.com熱心網友回復：
我找到了這個 hacky 解決方案 https://stackoverflow.com/a/64689702/3703099
function isEllipsisActive(e) {
var c = e.cloneNode(true);
c.style.display = 'inline';
c.style.width = 'auto';
c.style.visibility = 'hidden';
document.body.appendChild(c);
const truncated = c.offsetWidth >= e.clientWidth;
c.remove();
return truncated;
}
我不是一個超級粉絲，因為每次我們進行檢查時向 DOM 添加一個新元素對于 perf 來說是一個沉重的成本，而之前的方法只是比較 2 個屬性，但我找不到更好的 :(，任何更好的解決方案仍然是歡迎
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/445463.html
標籤：javascript css 火狐
上一篇：ReactRouterDom問題-localhost:3000/products到localhost:3000/products/2作業正常，但是當我重繪頁面時，我在控制臺中收到一些錯誤