之前在开发小程序的时候遇到过过长文字折叠的效果（微信朋友圈类型）。交互主要有3个：文本过长折叠，显示“全文”点击文本。当用户点击“全文”时，折叠的文本会展开，按钮会切换为“折叠”。正常显示实现这个效果本质上要解决两个问题：文字是否过长的判断标准。文字过长时如何折叠样式。判断文字是否过长。这是通知逻辑层控制“全文”按钮的显示和切换。如果没有这种交互，这个问题完全可以忽略不计。判断文本过长最直接的标准就是文本行数超过一定值。在浏览器端，可以通过DOM获取容器的高度和文本的行高，从而计算出文本显示的行数；但是js没有接口可以访问小程序中的文本行数或者组件的高度，我们也没有办法知道行数过大通知逻辑层。因此，我们只能退而求其次，以字符数作为文本过长的标准。至于有多少个字符被认为太长，可以通过考虑容器的宽度、字符（汉字会占用两个英文字符）、字体、字体大小和设计者来确定。但显然这种做法还是有问题的。比如当每行字符数少的时候，不处理太长的文本，还是会显示很多行，这违背了我们折叠太长文本的初衷。文字过长如何折叠一个简单的思路是用行高计算出一个固定的高度，只显示前几行，但是这种方法过于依赖样式的实现，不利于维护。在小程序中，我们可以使用移动端页面开发中的一个hack技术：-webkit-line-clamp，这个webkit核心私有CSS属性用来设置容器中剩余的文本行数，使得剩下的文本为在“溢出”“状态下。接下来只要结合text-overflow:ellipsis;和overflow:hidden;就可以实现只显示前几行太长文本的效果，即“折叠”。有几个要点注意-webkit-line-clamp的使用：兼容性，在Chrome、Safari、QQ等基于webkit的浏览器中非常可靠。微信小程序的View渲染引擎WKWebView和X5也是从webkit改过来的，兼容性有更好的保证。:webkit-box;，并设置子元素的排列方式为-webkit-box-orient:vertical;该属性的行数计算是根据inline元素计算的，只有inline元素的行数是根据第三点计算的，当涉及到文本分词时，为了实现按指定的折叠行数，每个段落不能输出到块元素（例如视图组件）。如何将它分成几个部分？虽然小程序没有
这样的东西，但好在它的文本组件支持转义字符，我们可以将每一段输入到一个文本组件中，在文本组件末尾加上\n来实现切分。综上所述，总结一下小程序下折叠过长文字的思路：文字过长由逻辑层判断的字符数决定，“”的显示和切换全文”按钮被控制。文本太长时应用-webkit-line-clamp样式折叠，撤消样式再次展开文本即可。
