产品效果

少于5行文字，则全部显示，多于5行文字，则显示 “查看全文”； 点击展开不用收起

1632897803(1).png

方案思路

利用 父级盒子的高度和 overflow: hidden; 和 position: absolute;

代码具体实现

HTML

  1. <!-- isShowIntro： 是否展开查看全文 -->
  3. <view 
  4.     class="item-content text-f15" 
  5.     :class="isShowIntro?'content-text line5':' content-text-show'">
  7.   {{content || ''}}
  9.   <span 
  10.       class="primary" 
  11.       v-if="isShowIntro" 
  12.       @click.stop="()=>{ this.isShowIntro=false }">
  13.       查看全文
  14.   </span>
  16. </view>

style

  1. .item-content {
  3.   text {
  4.     line-height: 46rpx;
  5.   }
  7.   .content {
  8.     margin-bottom: 8rpx;
  9.   }
  11.   .primary {
  12.     font-size: 28rpx;
  13.     color: #1EA0F1;
  14.   }
  16.   // 查看全文 - 收起
  17.   &.content-text {
  18.     position: relative;
  19.     max-height: 228rpx;
  20.     line-height: 46rpx;
  21.     overflow: hidden;
  22.     text-align: left;
  24.     .primary {
  25.       position: absolute;
  26.       top: 186rpx;
  27.       left: 0;
  28.       width: 100%;
  29.       height: 60rpx;
  30.       background-color: #fff;
  31.     }
  33.   }
  35.   // 查看全文 - 展开
  36.   &.content-text-show {
  37.     position: relative;
  38.     line-height: 46rpx;
  40.     .primary {
  41.       position: absolute;
  42.       bottom: 0;
  43.       left: 0;
  44.       width: 100%;
  45.       background-color: #fff;
  46.       display: none;
  47.       opacity: 0;
  48.     }
  50.   }
  52. }