【uniapp】CSS实现多行文本展开收起的文字环绕效果

1. 效果图

收起状态
展开状态

2. 代码实现

html 复制代码

<view class="word-wrap" id="descriptionTxt">
  <view class="fold-text" v-if="isFold">
    <text class="fold-btn" @click="changFold">全文</text>
    <text>{{ describe || '' }}</text>
  </view>
  <view class="unfold-text" v-if="!isFold">
    <text>{{ describe || '' }}</text>
    <text v-if="showFold" style="color: #bdc1c5; float: right; margin-left: 10rpx" @click="changFold">收起</text>
  </view>
</view>

js 复制代码

data: {
  return {
    describe: '', // 动态获取文本内容
    showFold: false, // 是否展示全文/收起
    isFold: false, // 右下角文字：true-全文 false-收起
  }
}

methods: {
  // 判断文本是否超过五行，默认展开
  checkTextLines() {
    const query = uni.createSelectorQuery().in(this)
    query
      .select('#descriptionTxt')
      .boundingClientRect(res => {
        // 获取文本内容的高度
        const contentHeight = res.height
        const lineHeight = rpxTopx(46) // 文字的行高
        const lines = Math.ceil(contentHeight / lineHeight)
        // 判断文本行数是否达到了5行
        if (lines > 5) {
          this.showFold = true
        } else {
          this.showFold = false
        }
      })
      .exec()
  },
  // 切换展开/收起
  changFold() {
    this.isFold = !this.isFold
  }
}

css 复制代码

.word-wrap {
  display: flex;
  
  // 收起状态
  .fold-text {
    font-size: 28rpx;
    color: #484848;
    line-height: 46rpx;
    text-align: justify;
    word-break: break-all;
    line-break: anywhere;
    white-space: pre-wrap;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
  }
  .fold-text::before {
    content: '';
    float: right;
    width: 0;
    /* 用整个容器高度减去按钮的高度，发现高度失效了，这里需要给 .fold-text 包裹一层，然后设置 display: flex */
    /* height: calc(100% - 46rpx); */

    /* 或者用margin负值来实现（性能会比 calc 略好一点） */
    height: 100%;
    margin-bottom: -46rpx;
  }
  .fold-btn {
    color: #bdc1c5;
    float: right;
    clear: both;
    margin-left: 10rpx;
  }
  
  // 未收起状态
  .unfold-text {
    font-size: 28rpx;
    color: #484848;
    line-height: 46rpx;
    text-align: justify;
    word-break: break-all;
    line-break: anywhere;
    white-space: pre-wrap;
  }
}

经测试：部分机型会有bug，后面就没用这种方法了，不知道大家有没有更好的方法实现这种效果，欢迎留言~。

具体原理请参考大佬文章：前端实现超出文字显示展开收起的功能