如何使用Javascript检查文本是否被CSS截断

我试图检测文本是否被JS截断。除了下面的一个边缘情况外，该解决方案非常有效。正如您将注意到的，如果文本在视觉上被截断，鼠标悬停时的第一个块将返回false

函数是智能的（e）{
返回值（e.offsetWidth

div.red{
边缘底部：1米；
背景：红色；
颜色：#fff；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
宽度：300px；
光标：指针；
}

将鼠标悬停并查看控制台消息。
分析报告是通过乱七八糟的。Plsss
分析报告是通过乱七八糟的。PLSSS
普通文本

尝试使用

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

---

它有点粗糙，但很有效。

这里的问题是

HTMLElement.offsetWidth

和

元素.scrollWidth

都是四舍五入值。
在我的电脑上，你的元素的真实内部宽度实际上是

300.40625px

，而在我的Chrome浏览器中，这个宽度是

300px

这里的解决方案是使用返回浮点值的API，并且没有太多

人们可能会试图检查内部的

，这实际上在所有OP的情况下都会起作用，但这只在这些情况下起作用：在div中添加一个填充、在这些
中添加一个边距，或者其他元素，然后它就被破坏了


document.queryselectoral（“.test”）.forEach（el=>{
切换（“截断”，isEllipsisActive（el））；
} );
功能是智能的（el）{
返回el.firstElementChild.getBoundingClientRect（）.width>el.getBoundingClientRect（）.width；
}
div.test{
边缘底部：1米；
背景：红色；
颜色：#fff；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
宽度：300px；
}
分区截断{
背景：绿色；
}
.左边距{
左边距：225px；
}

分析报告是通过乱七八糟的。Plsss
分析报告是通过乱七八糟的。PLSSS
分析报告是通过乱七八糟的。PLSSS
短文
普通文本
第一个悬停块返回true！，你是在特定的浏览器中测试它吗？@Boudyhesham它不在chrome上。你运行的是哪一个？chrome版本86.0.4240.111我也使用86.0.4240.111，双重和三重检查，first div为我返回false。可以确认chrome不工作，但在firefox 83.0b5上正常工作不确定我是否可以使用这种黑客方式，但要感谢你的时间伙伴。这假设要测试的元素在设置为body的直接子元素时，其所有样式仍然应用相同的样式。