微信小程序小工具之文本溢出

效果图如下 

wxml代码：

1. <view bindtap="test">
2.  
3. <view class="classname">
4.  
5. <view class="{{cs}}">
6.  
7. 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试 </view><text bindtap="ccc">{{sq}}1</text>
8.  
9. </view>
10.  
11. </view>

js代码：

1. Page({
2.  
3. data: {
4.  
5. sq: '详情',
6.  
7. cs: 'tt'
8.  
9.  
10.  
11. },
12.  
13. ccc: function (e) {
14.  
15. console.log("点击")
16.  
17. var s = this.data.sq;
18.  
19. if (s == '详情') {
20.  
21. this.setData({
22.  
23. sq: '收起',
24.  
25. cs: ''
26.  
27. })
28.  
29. } else {
30.  
31. this.setData({
32.  
33. sq: '详情',
34.  
35. cs: 'tt'
36.  
37. })
38.  
39. }
40.  
41. }
42.  
43. })

css代码

1. .tt {
2.  
3. display: -webkit-box;
4.  
5. overflow: hidden;
6.  
7. text-overflow: ellipsis;
8.  
9. word-break: break-all;
10.  
11. -webkit-box-orient: vertical;
12.  
13. -webkit-line-clamp: 5;
14.  
15. }