话不多说直接上代码，可直接复制根据需求修改
TextMore.vue
<template>
<div>
<div class="yuanqu-con" :style="{ '--beforeHeight': beforeHeight }">
<div :style="{ '-webkit-line-clamp': row }" class="text" v-if="isAll == 0" ref="myDiv">
<span class="btn" @click="lookmore" v-if="isMore == 1">查看更多</span>
<div class="text-con" ref="textMore">
{{ desc }}
</div>
</div>
<div v-if="isAll == 1">{{ desc }} <span class="Packup" @click="isAll = 0">收起</span></div>
</div>
<div class="play" style="opacity: 0; height: 0px; line-height: 24px; overflow-y: auto">
<div ref="nonetext">{{ desc }}</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref, defineProps, nextTick } from 'vue';
const props = defineProps({
desc: {
type: String,
default: '',
},
row: {
type: Number,
default: 3,
},
});
const beforeHeight = ref('48px');
const nonetext = ref(null);
const textMore = ref(null);
const myDiv = ref(null);
const isMore = ref(0);
const isAll = ref(0);
const lookmore = () => {
isAll.value = 1;
};
onMounted(() => {
// nextTick(() => {
MoreRsize();
// });
});
const MoreRsize = () => {
nextTick(() => {
if (nonetext.value.clientHeight > props.row * 24) {
isMore.value = 1;
} else {
isMore.value = 0;
}
beforeHeight.value = (props.row - 1) * 24 + 'px';
});
};
// window.onresize = () => {
// MoreRsize();
// };
</script>
<style lang="less" scoped>
.yuanqu-con {
width: 100%;
font-size: 14px;
color: #666666;
line-height: 24px;
.text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.text::before {
content: '';
float: right;
height: var(--beforeHeight);
/*先随便设置一个高度*/
background: #fff;
}
/* .text::after {
content: '';
width: 100%;
height: 65px;
position: absolute;
background: #fff;
} */
.btn {
margin-left: 3px;
padding: 0 3px;
float: right;
clear: both;
cursor: pointer;
color: #4876ff;
}
}
.Packup {
color: #4876ff;
cursor: pointer;
}
.play {
font-size: 14px;
color: #666666;
// 去除滚动条
// overflow: hidden;
// 隐藏滚动条
scrollbar-width: none;
}
</style>使用
<TextMore
desc="这是一个测试的文字阶段展开这是一个测试的文字阶段展开这是一个测试的文字阶段展开这是一这是一个测试的文字阶段展开这是一个测试的文字阶段展开这是一个测试的文字阶段展开这是一个测试的文字阶段展开个测试的文字阶段展开这是一个测试的文字阶段展开这是一个测试的文字阶段展开这是一个测试的文字阶段展开这是一个测试的文字阶段展开这是一个测试的文字阶段展开这是一个测试的文字阶段展开"
:row="3"
></TextMore>效果
