一段文字的展开和收起，超出部分用省略号表示

一、展开、收起占单独的一行

效果图：

css代码如下：

.analysis-result-item-improve {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;  //收起时显示的行数
  overflow: hidden;
  text-overflow: ellipsis;  //超出部分用省略号表示
  line-height: 36rpx;
}

.analysis-result-item-improve.hide {
  display: -webkit-box;
}

.analysis-result-item-improve.show {
  display: inline-block;
}

html代码：

<view class="analysis-result-item-improve {{isFold ? 'hide' : 'show'}}">文段内容</view>

二、展开、收起与文本最后一段在同一行

效果图：

js代码：

 showMore(){
   this.setData({
     isFold:!this.data.isFold
   })   //这里得用setData赋值   
   console.log(!this.data.isFold);
}

HTML代码：

“更多”要写在内容文本前

<view class="content ">
    <view class="text {{ isFold ? 'hide' : 'show'}}">
        <view class="more" bind:tap="showMore">
             <text wx:if="{{isFold}}">
                <text class="arrow"></text>更多
             </text>
             <text wx:if="{{!isFold}}">收起</text>
         </view>
       陆羽《茶经》中按土壤质量分茶叶种植为三级：上者生烂石，富含矿物质，利于茶树生长；中者生砾壤，砂质土壤，养分略逊；下者生黄土，黏重不透气，茶叶品质低。
     </view>

</view>

css部分：

.content {
  padding: 30rpx;
  background: #FBFBFB;
  border-radius: 16rpx;
  border: 2rpx solid rgba(113, 145, 104, 0.1);
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #666666;
  line-height: 44rpx;
  display: flex;
}

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

.content .text::before {
  content: '';
  float: right;
  height: calc(100% - 44rpx);   //自动计算展开和收起时文本的高度 - 最后一行的高度
  /* width: 10rpx;
  background-color: #333333; */
}

.content .text.hide { //这里不能有空格
  display: -webkit-box;
}

.content .text.show {
  display: inline-block;
}

.more {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #5C7D54;
  line-height: 44rpx;
  float: right;
  clear: both;
  
}

.more .arrow {
  display: block;
  float: right;
  width: 5px;
  height: 5px;
  border-top: 1px solid #5C7D54;
  border-left: 1px solid #5C7D54;
  transform: rotate(225deg);
  margin: 15rpx 15rpx 0rpx 10rpx;
}

这里我只画了向下的箭头，向上的箭头同理，只要改变transform的角度就行

这部分代码我参考的是这个链接https://juejin.cn/post/6963904955262435336

写的很详细，虽然我对一些布局还是一知半解，还做不到灵活运用，但是从中还算是有所获益。