应用text-overflow:ellipsis与overflow:hidden后如何获取截断保留的可见字符数？

不存在浏览器原生API可以直接返回CSS单行截断后，元素上保留的可见字符数、或是被移除的文本总字符数。因为text-overflow: ellipsis是纯渲染层的装饰行为，DOM树中存储的始终是完整的原始文本内容，截断发生在最终排版绘制阶段，浏览器不会把这个视觉截断位置同步暴露给JS层。
但你完全可以通过测量排版宽度的逻辑，反推出真实的截断边界，进一步计算未展示的邮箱数量，满足业务需求。

text-overflow的截断逻辑完全独立于DOM结构：

• 无论文本被截成什么样，你通过element.textContent拿到的永远是完整的原始字符串，长度和用户视觉上看到的文本没有对应关系
• 截断是渲染引擎最后一步的绘制行为，没有把截断的偏移量、被截掉的字符长度这类信息回写到元素的可访问属性上，强行依赖现成属性取数永远会拿到错误结果。

这套反推逻辑的核心是复刻真实渲染环境下的文本宽度，找到刚好能塞进容器可视区的文本末尾位置，具体步骤：

• 先拿到展示元素的纯文本可用宽度：取元素的clientWidth，扣减掉左右内边距、左右边框宽度，得到容器内能放下文本的最大横向空间。因为省略号会占据固定的横向宽度，还要再扣掉三个点的实际渲染宽度，剩下的值才是真正能展示正文的可用空间。
• 搭建和展示元素完全同排版规则的离屏测量容器：复制展示元素的所有字体相关样式（font-size、font-family、font-weight、letter-spacing），将容器放到视口外（比如设置position:absolute; left:-9999px; visibility:hidden，禁止用display:none，否则无法拿到真实排版宽度）。
• 逐段测量文本宽度：将原始完整邮箱串按字符逐段塞入测量容器，直到容器内文本的滚动宽度刚好不超过之前算出来的可用空间，此时测量容器里的文本末尾位置，就是用户视觉上实际能看到的文本边界。
• 匹配分隔符算未展示邮箱数：从刚才测出来的可见文本末尾位置向前找，定位最近的;分隔符位置，统计原始字符串中，这个位置之后的所有@符号数量——这个数值就是用户没看到的剩余邮箱ID计数，完全匹配你设计的基于@、;识别邮箱的逻辑。

如果不需要额外搭离屏容器，也可以用Range API提升测量精度：通过document.createRange()在实际展示元素上调整文本范围的终点，直接读取Range的矩形宽度，当宽度刚好小于等于可用空间时，对应的Range偏移量就是截断位置，比离屏测量的精度更高。

• 不要靠固定字符数硬算截断位置：不同字符的渲染宽度差异极大（比如小写i和大写W的宽度能差2-3倍，中文字符和英文字符宽度差1倍），纯靠按字符数截断的逻辑永远不准。
• 省略号的宽度不要硬编码：不同字体下三个点的宽度存在差异，最准确的方式是单独测量"..."在当前字体下的实际宽度，不要统一按1em估算。
• 跨截断点的邮箱要算到未展示部分：如果截断点刚好落在某个邮箱的中间，不要把半露的邮箱算成已展示内容，向前找分隔符时要把这种截断点前后的内容做合理切分。

内容的提问来源于stack exchange，提问作者Vipul Sachdeva