聊聊小程序怎么实现“全文收起”功能

聊聊小程序怎么实现“全文收起”功能
小程序怎么实现“全文收起”功能？下面本篇文章小程序实现多行文本“全文收起”功能的方法，希望对大家有所帮助！

小程序怎么实现“全文收起”功能？下面本篇文章小程序实现多行文本“全文收起”功能的方法，希望对大家有所帮助！

小程序里经常会碰到需要实现多行文本”全文收起“功能，在掘金上有搜索到用纯css实现。亲测：ios很完美，andriod上的无效。

小程序社区有很多方案，目前在社区有看到一位大佬使用js动态计算告诉去实现，亲测大致有效果，测试后，在一些特殊情况下，计算会有误差，所以有更改些许代码。

一、需求

位于多行文本右下角，展示”全文/收起“按钮

“展开”和“收起”两种状态的切换

当文本不超过指定行数时，不显示”全文/收起“按钮

文本显示【全文】展示状态下，更新数据，文本不被收起

二、实现思路1、多行文本截断

主要用到用到 line-clamp，关键样式如下

.text-clamp3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;}