多余文字查看更多 怎么实现 移动端

Question

求思路

通过js处理截取文字，怎么去判断 文字截取到哪

Answer 1

最大的问题是如何让最后一行的文字和「查看更多」刚好排满一整行。
一个思路：

1. 先把元素里的文字清空，留下「...」和「查看更多」
2. 遍历需要裁剪的文字，把文字一个个的放进元素
3. 检查元素高度，当元素高度变化了，就说明换行了
4. 当第三次换行，说明已经到第四行了，这时就删除最后一个文字，停止遍历

配合 text-align: justify，就留下了刚好三行的文字。
这个方法可以适配不同的字型，但是性能会比较差

---

楼上的 -webkit-line-clamp: 3 是标准做法，但是不适配最后有「查看更多」的情况，而且兼容性稍差。
倒是可以设置 text-overflow: '... 查看更多'，这样文字倒是完美裁剪了，但是样式和可点击区域怎么搞没想到