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

1. 效果图

收起状态
展开状态

2. 代码实现

<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>

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.heightconst 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}
}

.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;}
}