vue3文本超过2行隐藏并显示更多按钮

在Vue 3中，你可以利用v-html指令结合CSS来实现文本内容超出两行后自动隐藏，并显示“更多”按钮的功能。以下是一个基本的示例：

首先，在HTML模板中设置你的文本和按钮：

<template>
  <div class="content">
    <p v-html="truncatedText" :class="{ showMoreButton: truncated }"></p>
    <button @click="showMore">更多</button>
  </div>
</template>

然后，在你的JavaScript组件中处理文字和状态：

<script setup>
import { ref } from 'vue';

const text = '这是长篇文本，可以有很多行...'; // 你的实际文本
const truncatedText = ref(text);
let truncated = false;

function toggleTruncation() {
  truncated.value = !truncated.value;
}

// 当点击“更多”时，切换是否展示完整文本
function showMore() {
  toggleTruncation();
}
</script>

<style scoped>
.content {
  overflow: hidden; /* 隐藏超出的部分 */
  text-overflow: ellipsis; /* 文本省略掉的部分显示点点 */
  display: -webkit-box; /* 对于 Safari 等浏览器 */
  display: -ms-flexbox; /* 对于 IE 和 Edge */
  display: flex; /* 其他现代浏览器 */
  -webkit-line-clamp: 2; /* 最多显示两行 */
  line-clamp: 2;
  max-height: calc(2em + 4px); /* 高度计算出两行的高度 */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.showMoreButton {
  margin-top: 0.5rem;
}
</style>

这个例子中，当文本超出两行时，它会被截断并在末尾显示一个“更多”按钮。点击按钮会触发`toggleTruncation()`函数，改变`truncated`变量的值，控制文本是否全部显示。