微信小程序 - 文字收縮與展開

 

wxml

<view class='containers'>
  <text class="content {{ellipsis?'ellipsis':'unellipsis'}}">
 飛房間卡了飛機而來發發色法爾范發瘋安峰山粉色案發前二十阿里附近發打發打發是范德薩發放就開了房間愛離開房間愛卡房間愛瘋愛瘋飛房間卡了飛機而來發發色法爾范發瘋安峰山粉色案發飛房間卡了飛機而來發發色法爾范發瘋安峰山粉色案發  4   </text>
  <view bindtap='ellipsis'>
    <view>
      <button>{{ellipsis?'展開':'收起'}}</button>
    </view>
  </view>
</view>


<!-- 
 1. content view包裹text，一旦超出，使用css(-webkit-line-clamp)樣式來控制展開或收縮 15  2. button按鈕綁定一個事件，根據({{ellipsis}})，使之置為true或false來控制展開或收縮 16  -->

 

 

css

page{
 font-size: 30rpx;
}


.content {
 display: -webkit-box;
 -webkit-box-orient: vertical;
 text-overflow: ellipsis;
 overflow: hidden;
}


/* 修改列數 */
.ellipsis {
 -webkit-line-clamp: 3;
}


/* 展示全部 */
.unellipsis {
 -webkit-line-clamp: 0;
}

 

js

 

let _page;

Page({
  data: {
    // 文字是否收起，默認收起
    ellipsis: true
  },
  /**
   * 收起/展開按鈕點擊事件
   */
  ellipsis() {
    _page = this;
    let value = !this.data.ellipsis;
    _page.setData({
      ellipsis: value
    })
  }
})

 

 

 

 

點擊下載示例：小程序-文字與收縮