間隔了幾個月，又被拉來做小程式了~~~
頁面中有一段說明文字，要求預設收起，只展示3行；點選按鈕可以檢視完整內容。看了下微信文件，沒發現有控制元件滿足要求，於是決定通過js實現

先看看佈局檔案，關鍵在與{{ellipsis?‘ellipsis’:‘unellipsis’}}，樣式根據js中的ellipsis改變。

<view class='bg-white marginTop10 vertical'>
  <text class='pay-hint-tille'>掛號支付須知</text>
  <text class="pay-hint-content {{ellipsis?'ellipsis':'unellipsis'}}" >1. 支付成功後，將會推送排隊號；就診當日可直接前往診室等待叫號就診，無需再現場繳費、排隊。\n2. 已完成支付掛號費用的使用者，如在就診前一日取消預約訂單，成功申請取消訂單後，正常情況下系統將會在7個工作日內自動退費至使用者支付賬號內。\n3. 訂單在正常狀態下（非系統故障、非醫生臨時停診）被爽約，由於佔用了醫院號源，此類訂單不予以退費。</text>
  <view class='bg-white-ellipsis' bindtap='ellipsis'>
    <image class='img-ellipsis' src="{{ellipsis?'../images/ellipsis.png':'../images/unellipsis.png'}}"></image>
  </view>
</view>
 

接下來看下css，其他的css都是常規配置，不需要看， 我們看下pay-hint-content及後面的ellipsis與unellipsis：

.pay-hint-content{
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  font-size: 13px;
  color: #888;
  display: -webkit-box;
  -webkit-box-orient:vertical;
  text-overflow: ellipsis;
  overflow:hidden; // 通過以上四行實現收縮功能
}
.ellipsis{
  -webkit-line-clamp:3; // 最多顯示3行
  opacity: 0.75 // 透明度75%
}
.unellipsis{
  -webkit-line-clamp:0; // 全部顯示
  opacity: 1 // 不透明
}
 

這裡需要注意的有overflow：hidden，如果不設定overflow會是神馬效果呢？如下圖（可以看到廈航文字後，下面的文字還是顯示了，只是未佔據控制元件位置而已）：

原文：簡書ThinkinLiu 部落格: IT老五
我們再看看js：

Page({
  /**
   * IT老五 http://itlao5.com
   * 簡書 https://www.jianshu.com/p/f5b42ebe0a1f
   */ 
  data: {
    ellipsis: true, // 文字是否收起，預設收起
  },
  /**
   * 收起/展開按鈕點選事件
   */
  ellipsis: function () {  
    var value = !this.data.ellipsis;
    this.setData({
      ellipsis: value
    }) 
  },