文本超过n行时展示省略号，并添加“展开/收起”按钮效果

需求: 对接口返回的数据渲染时判断如果内容超过n行，显示“展示/收起”按钮

思路：

（1）设置两个开关 isShowMore（控制“展开/收起”按钮是否展示） isOpenJ（当前的展开状态,动态添加 n行省略号的class样式）

（2）通过ref获取文本内容div的scrollHeight（总高度） 和 offsetHeight（元素在屏幕上的可见高度）, 判断二者大小改变isShowMore值。

demo代码：

<template>
	<div ref="brief" class="ellipsis" :class="{ active: !isOpenJ }">
		<span>{{ text }}</span>
	</div>
	<span v-if="isShowMore">
		<span class="more" @click="isOpenJ = !isOpenJ">{{ isOpenJ ? '更多' : '收起' }}</span>
	</span>

</template>

<script setup>
import { ref, nextTick } from "vue"
const brief = ref()
const isShowMore = ref(false)
const isOpenJ = ref(false)
const text = ref('超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行超过俩行')
nextTick(() => {
	const scrollHeight = brief.value.scrollHeight;//元素内容的总高度
	const offsetHeight = brief.value.offsetHeight //元素在页面上展示出来的实际高度
	isShowMore.value = scrollHeight > offsetHeight ? true : false
})


</script>

<style scoped>
.ellipsis {
	width: 500px;
	position: relative;
	/* padding-right: 3px; */
	overflow: hidden;
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;

	&.active {
		display: block;
		text-overflow: initial;
	}

}

.more {
	color: blue;
	cursor: pointer;
}
</style>