【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,后面就没用这种方法了,不知道大家有没有更好的方法实现这种效果,欢迎留言~。

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

相关推荐
爱喝水的小周11 分钟前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen021114 分钟前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅18 分钟前
介绍electron
前端·javascript·electron
周胡杰20 分钟前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
315356691321 分钟前
ClipReader:一个剪贴板英语单词阅读器
前端·后端
玲小珑23 分钟前
Next.js 教程系列(十一)数据缓存策略与 Next.js 运行时
前端·next.js
qiyue7738 分钟前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
断竿散人42 分钟前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
Danny_FD44 分钟前
Vue2 + Vuex 实现页面跳转时的状态监听与处理
前端
小飞悟44 分钟前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计