Question

微信小程序文字折叠效果

这是某小说网站的小程序。我想知道这个文字折叠的效果是如何实现的。就是展开显示全文那个效果。就是他是如何判断什么时候显示展开。判断条件是什么。还有一个就是。他的展开是怎么和溢出隐藏那三个...同行的。 求实现代码。不要网上复制些看不懂的东西。





Answer 1

首先把那个文字框view设置一个固定的高度（比如3行），overflow属性设为hidden，position属性设为relative。
“...”和“展开”放在同一个绝对定位（position为absolute）的view内，放在文字框内，定位在右下角，文字大小与文字框一致，这样当这个层显示时，就自然覆盖了文字框右下角，形成“... 展开”的效果。
然后在js中计算文字简介的字数，再根据文字框的字体宽度计算出总长度，除以文字框的宽度，如果计算结果大于3，就说明溢出了。这时可以通过setData通知wxml显示“... 展开”。
给“... 展开”绑定tap事件，点击后文字框的高度变为auto，这样溢出的部分就重新出现了，当然这时候要再次把“... 展开”隐藏。

Answer 2

本质上，要实现这个效果得解决两个问题：

• 判断文本是否过长的标准

• 文本过长时样式如何折叠

判断文本是否过长

所谓文本过长就是文本占据的高度太大，之所以要判断这个，是为了能告知逻辑层控制“全文”按钮的展示与切换。如果没这个交互，完全可忽略这个问题。

而最直接的文本过长判断标准，是文本行数超过某个值。在浏览器端，可通过DOM获取容器高度和文本的行高，来计算文本显示的行数；但小程序中并没有给js访问文本行数或组件高度的接口，我们无从获知行数过多告知逻辑层。

所以，只能退而求其次，采用字符数来作为文本过长的标准。至于多少字符算过长，可综合容器宽度、字符（中文字符会占两个英文字符宽度）、字体、字号，和设计师确认。但显然这种做法还有问题，比如遇到每行字符数很少时仍会显示许多行、而不进行文本过长的处理，违背我们折叠过长文本的初衷。

文本过长如何折叠

一个简单的思路是用行高算出一个固定的高度，只显示前几行，但该做法过于依赖样式的实现、不利于维护。在小程序中，我们可采用移动端页面开发中一个hack技术：-webkit-line-clamp，这个webkit内核私有的CSS属性用于设置留在容器中的文本行数，让其余的文本处于“溢出”状态。接下来只要结合text-overflow: ellipsis;和overflow: hidden;就能达到让过长的文本只显示前几行的效果，即“折叠”。

希望我的回答对您有所帮助。如果需要可以找第三方平台开发小程序。