如何判断class为a的span元素是否发生文本溢出？

首先要明确，text-overflow: ellipsis生效的前提是必须配合以下样式，否则即使文本超长也不会显示省略号：

• white-space: nowrap;（强制文本不换行）
• overflow: hidden;（隐藏超出容器的内容）
• display: inline-block; 或 display: block;（inline元素无法应用overflow属性，必须转为块级或行内块级）

满足上述条件后，可通过比较元素的scrollWidth和clientWidth属性来判断是否溢出：

• scrollWidth：元素内容的实际宽度（包括超出容器的部分）
• clientWidth：元素的可见宽度（不包含边框、滚动条）

当scrollWidth > clientWidth时，说明文本内容超出了容器宽度，已经触发了省略号显示。

代码示例 #

// 获取目标span元素
const targetSpan = document.querySelector('.a');
// 判断是否溢出
const hasOverflow = targetSpan.scrollWidth > targetSpan.clientWidth;
// 输出结果
console.log(hasOverflow); // true = 文本已溢出，false = 未溢出

注意：这段代码需要在DOM完全渲染后执行，可放在DOMContentLoaded事件回调中，或者页面底部。

内容的提问来源于stack exchange，提问作者Loveneesh Singla