小程序模板网

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

效果图如下 

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. }


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23551.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询