偶然间遇到一个场景，怎么判断一段文本是否超过 5 行或者指定行数，并在超过时显示 "展开/收起" 按钮。那应该如何实现呢？
在 Vue 3 的项目下实现：
<template><div class="text-container"><div class="text-content" ref="textContentRef" :class="{ collapsed: showFullText }">{{ longText }}</div><!-- 仅在内容超过 5 行时显示展开/收起按钮 --><button v-if="isOverflowing" @click="toggleText" class="toggle-btn">{{ showFullText ? '收起' : '展开' }}</button></div>
</template><script setup>
import { ref, onMounted, nextTick } from 'vue'// showFullText：记录当前文本是展开还是折叠状态
const showFullText = ref(false)
// isOverflowing：用来判断文本是否超出了 5 行
const isOverflowing = ref(false)
const textContentRef = ref(null)// 模拟长文本
const longText = `这是一个很长的文本，可以用来展示折叠效果。这个文本很长很长，需要在界面上显示多行，而我们希望默认显示 5 行的内容。如果超过 5 行，则展示展开按钮。点击展开按钮后，显示所有内容。如果再次点击收起按钮，恢复到 5 行展示。心灵鸡汤（凑字数）：所有的失败都是为成功做准备。抱怨和泄气，只能阻碍成功向自己走来的步伐。放下抱怨，心平气和地接受失败，无疑是智者的姿态。抱怨无法改变现状，拼搏才能带来希望。真是金子，只要自己不把自己埋没，只要一心想着闪光，就总有闪光的那一天。
`// 切换展开和收起状态
const toggleText = () => {showFullText.value = !showFullText.value
}// 计算是否溢出 5 行
const calculateOverflow = () => {const el = textContentRef.valueif (el) {const lineHeight = parseFloat(getComputedStyle(el).lineHeight) // 获取行高const maxVisibleHeight = lineHeight * 5 // 计算出 5 行的最大高度// scrollHeight：内容的实际高度（包含不可见部分）isOverflowing.value = el.scrollHeight > maxVisibleHeight // 判断是否超出 5 行}
}// 在组件挂载时执行文本溢出检查
onMounted(() => {nextTick(() => {calculateOverflow()})
})
</script><style scoped>
.text-container {max-width: 600px;margin: 0 auto;font-size: 16px;line-height: 1.5;border: 2px solid pink;border-radius: 5px;padding: 18px;
}.text-content {overflow: hidden;display: -webkit-box; /* 需要这行以启用多行省略号 */-webkit-box-orient: vertical; /* 垂直排列 */-webkit-line-clamp: 5; /* 限制为 5 行 */max-height: calc(5 * 1.5em); /* 5 行的最大高度 */transition: max-height 0.3s ease; /* 添加过渡效果 */
}.text-content.collapsed {max-height: none; /* 展开时显示所有内容 */-webkit-line-clamp: unset; /* 移除行数限制 */
}.toggle-btn {background-color: transparent;border: none;color: orange;cursor: pointer;margin-top: 10px;padding: 0;
}
</style>
展示为：
对代码进行注释：
1、text-content 是存放长文本的地方，默认显示 5 行，超出部分通过 max-height 和 -webkit-line-clamp 进行隐藏，并通过 transition 实现展开/折叠的动画效果。
2、collapsed 类控制文本展开时移除 max-height 和 -webkit-line-clamp，显示所有内容。
注意📢：
1、line-height 与行数计算
这里的 line-height 被设定为 1.5，表示每行的高度是文本字体大小的 1.5 倍。在实际项目中，需要根据实际的 line-height 和字体大小来调整。
2、-webkit-line-clamp 属性
-webkit-line-clamp 是一个非标准的 CSS 属性，兼容性需要注意，尤其是在非 WebKit 内核的浏览器中。
3、性能考虑
计算 scrollHeight 和 clientHeight 的操作会触发浏览器的重排（Reflow），因此建议避免在高频操作中使用，如 resize 或 scroll 事件中。
其他实现方法
1、使用 JavaScript 动态裁剪文本字符串，只显示前 n 个字符，剩余部分用省略号 ... 替代。
const shortenedText = longText.slice(0, 100) + '...';但可能没有办法指定行数
2、使用第三方库，比如：Clamp.js，它可以更灵活地处理多行文本的裁剪和展开。
Clamp(document.getElementById('my-text'), { clamp: 5 });
总结：
上述例子展示了如何在 Vue 3 中动态判断文本是否超出 5 行，并通过按钮实现折叠和展开功能。
