当文本长度接近宽度时，使用 scrollWidth 进行错误的省略号检测

Question

我必须检测跨度上的省略号，所以我找到了方法“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>

Answer 1

我发现了这个 hacky 解决方案

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 个属性，但我找不到更好:(，仍然欢迎任何更好的解决方案

当文本长度接近宽度时，使用 scrollWidth 进行错误的省略号检测

Wrong elipsis detection with scrollWidth when text length is close to width

javascript

css

firefox