为什么浏览器按 css 渲染好了一个元素，却没法暴露一些属性让开发者知道呢？

最近有个需求是让超长文本展示有展开，收起的功能，看了很多库，很多都是使用 js 截断文本来实现的，我想用 css 主导，js 辅助来实现，例子

但是如果是 html 文本的话，浏览器能按设定的行数来显示省略符号，但是我想知道这个省略到底是在哪个字后省略的，哪一行省略的，或者这个省略号的位置是什么。

为什么浏览器知道但是却没有个啥属性来让开发者知道呢，只能用些曲线救国的方式来获取。或者说有啥属性能获取，求教

xiaoming1992

91 天前

@codehz #19 学到了，感谢。
我写了个 [demo]( https://cdn.16px.cc/public/2025-08-01/ellipsis.html), 确实能获取到文本超出后的省略号的尺寸位置。

但是如果你慢慢改变页面宽度（浏览器宽度），会发现，省略号所在的 DOMRect 有时候在第三个，有时候在第四个，且有时候与视觉不一致。所以实际用起来可能还需要处理这些问题。

xiaoming1992

91 天前

re #22 ~~"且有时候与视觉不一致"~~
md 复现不出来了，估计是渲染耗时导致 render 执行时机问题，算我代码 bug 。
但是“省略号所在的 DOMRect 有时候在第三个，有时候在第四个”这个问题依旧存在

codehz

91 天前

@xiaoming1992 不能按位置来算，因为如果里面有存在其他元素的话，就可能单独生成一个 rect ，因此最为推荐的方法就是看那一行能达到的最大宽度，然后在往前数三个点的宽度就是省略号的位置（或者你安排一个比三个点更长的东西盖住也可以）

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/1148828

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.