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

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

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

我们css可以这么写

我们只需要这一部分

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

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

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

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

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

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

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

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

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

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

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

js

wxss

<view class="box">我的字数很多阿萨德撒萨达萨达萨达就安静的加多少家看得开卡打卡拉到了啦啦队啦啦队</view>f

.box{

width:100rpx

height:30rpx//高度不能乱写，你要自己去看你的两行文字占多少高度

font-size:15rpx

overflow:hidden//一定要写

text-overflow: ellipsis//超出省略号

display:-webkit-box//一定要写

-webkit-line-clamp: 2//控制行数

-webkit-box-orient: vertical//一定要写

}

---