微信小程序文字过长截取_微信小程序过长文本折叠效果的探索

之前做小程序开发时，遇到要实现过长文本进行的折叠的效果(类型微信朋友圈那种)。主要交互有三点：

让文本过长时折叠、并显示一个“全文”的点击文本

当用户点击“全文”则会展开被折叠的文本，并切换该按钮为“收起”

对不过长的文本则正常显示

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

判断文本是否过长的标准

文本过长时样式如何折叠

判断文本是否过长

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

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

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

文本过长如何折叠

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