微信小程序text文本的展开与收起

wxml中

<text class="title {
  {content?'content':'content1'}}">做个心平气和的陌生人，正所谓没有经历，哪来的回忆，你好，陌生人，相逢一笑泯恩仇。有时候，我也会埋怨生活总是波折不断，遇到突如其来奇怪的事、奇怪的人，莫名将自己牵扯其中，明明懒得理会，却又咽不下刹那间的心塞而影响心情，该如何是好。
</text>
<view bindtap='content'>
  <view>
     <button>{
  {content?'展开':'收起'}}</button>
  </view>
</view>

css中

.title{
  margin-left: 5%;
  margin-right: 5%;
  font-size: 16px;
  color: #333;
  /* 以下四行实现收缩功能 */
  display: -webkit-box;
  -webkit-box-orient:vertical;
  text-overflow: ellipsis;
  overflow:hidden; 
}
.content{
  /* 最多显示3行 */
  -webkit-line-clamp:1;
}
.content1{
  /* 全部显示 */
  -webkit-line-clamp:0; 
}

js中

  data: {
    // 文字是否收起，默认收起
    content:true