之前寫過一篇《微信小程式：text文字的展開與收起》,通過css控制最大顯示行數，後來不少人私信問如果不足三行如何自動隱藏“展開/收起”按鈕；我接觸這個時間比較短，也不太熟悉，暫時只能想到改為js控制文字長度來處理。

js

js主要定義了四個變數：完整內容content，顯示的內容contentShow，收起時最大顯示文字長度maxLength，是否收起ellipsis
然後定義了“展開/收起”按鈕的點選觸發事件ellipsis。

/* js */
Page({
  /**
   * 頁面的初始資料
   */
  data: {
    content: "1. 部落格 itlao5.com\n2. 簡書 ThinkinLiu", // 完整的內容
    contentShow: "1. 部落格 i", // 真實顯示的內容
    maxLength: 10, // 收起時最大顯示文字長度
    ellipsis: true, // 是否收縮
  },
  ellipsis: function () {
    var ellipsis = !this.data.ellipsis;
    var contentShow = this.data.content;
    var maxLength = this.data.maxLength;
    // 如果內容長度少於10，則不擷取;否則當處於收起狀態，擷取7個文字並加上省略號
    contentShow = (contentShow.length > maxLength && ellipsis) ? contentShow.substring(0, maxLength - 3) + "..." : contentShow;
    this.setData({
      contentShow: contentShow,
      ellipsis: ellipsis
    })
  },
})
 

wxml

wxml很簡單，一個用於展示內容的text，一個展開/隱藏 按鈕，需要注意點是hidden='{{content.length<=maxLength}}'，即當文字小於指定長度時，隱藏該按鈕

/* wxml */
<view class='bg-white vertical'>
  <text class="pay-hint-content" >{{contentShow}}</text>
  <text class='ellipsis_text' hidden='{{content.length<=maxLength}}'  bindtap='ellipsis'>{{ellipsis?"展開":"收起"}}</text>
</view>
 

wxss

最後，提供下wxml中用到的wxss

/* wxss */
.bg-white{
  width: 100%;
  display: flex;
  flex-direction: row;
  background-color: white;
}
.vertical {
  display: flex;
  flex-direction: column;
}
.pay-hint-content{
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  font-size: 16px;
  color: #888;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ellipsis_text{
  width: 100%;
  font: 16px;
  text-align: center
}

原文：簡書ThinkinLiu 部落格: IT老五

ps：與《微信小程式：text文字的展開與收起》不同，本文方法使通過js控制文字長度，有點是可以實現不足指定文字長度自動隱藏“展開/收起”按鈕，不足之處是中英文文字長度不同，以及不同螢幕一行可以顯示的文字長度不同，導致會出現文字一行顯示不完整的情況。實際中可以根據需求來選擇使用哪種方式，或者可以綜合兩種方式，少於N字隱藏按鈕，收起與隱藏根據css實現。