微信小程序text文本溢出单行多行省略

在做小程序的时候遇到在text标签里面的文本过长，需要限制显示长度，并且在限制了长度的后面加上

省略号代表后面还有内容。

我们css可以这么写

我们只需要这一部分

并且修改这个可以修改显示的行数

然后修改高度就可以完美显示我们想要的行数。

为了展示效果，提前加入多行文本模拟数据。如下图

给需要使用换行的 text 标签添加CSS自动换行属性

小程序中的 textarea 等标签虽然都是显示文本的双闭合标签，但在使用方式上跟W3C标准下的 textarea 标签有所不同。延伸阅读： 微信小程序开发文档·textarea组件

js文件

1、文本超过n行显示省略号

2、省略时，显示 展开/收起 按钮

3、文本不超过n行时，不显示省略号和展开/收起按钮

文本是否显示省略号，通过css可以实现；

判断是否显示展开/收起按钮；

通过SelectorQuery选择器，获取text及其父元素的高度，判断text高度是否超过其父元素高度，决定是否显示展开/收起按钮即可；

wx.createSelectorQuery() ：返回一个 SelectorQuery 对象实例。

SelectorQuery.exec(function callback) ：执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。

NodesRef.boundingClientRect(function callback) ：添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。

js

wxss

---