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

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

相关推荐
yantuguiguziPGJ1 小时前
WPF 联合 Web 开发调试流程梳理(基于 Microsoft.Web.WebView2)
前端·microsoft·wpf
大飞记Python1 小时前
部门管理|“编辑部门”功能实现(Django5零基础Web平台)
前端·数据库·python·django
tsumikistep2 小时前
【前端】前端运行环境的结构
前端
你的人类朋友2 小时前
【Node】认识multer库
前端·javascript·后端
Aitter2 小时前
PDF和Word文件转换为Markdown的技术实现
前端·ai编程
mapbar_front3 小时前
面试问题—上家公司的离职原因
前端·面试
昔人'4 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'4 小时前
css `dorp-shadow`
前端·css
流***陌4 小时前
扭蛋机 Roll 福利房小程序前端功能设计:融合趣味互动与福利适配
前端·小程序
烛阴5 小时前
用 Python 揭秘 IP 地址背后的地理位置和信息
前端·python