行文字显示固定行数+“···展开”，点击展开后显示收起

在开发中，经常会遇到需要在界面上显示固定行数的文本，然后通过一个标识（如“···展开”）提示用户可以展开查看更多内容。点击这个标识后，隐藏的文本会展开显示，同时显示一个“收起”按钮。这种交互方式在用户界面设计中非常常见，它能够有效地管理内容的显示空间，提高用户体验。

实现这种交互功能的方法有很多，以下是两种常见的实现方式：

1. 使用JavaScript和CSS：
- CSS用于设置文本显示的行数以及“···展开”和“收起”按钮的样式。
- JavaScript用于监听按钮的点击事件，通过切换CSS类或者操作DOM来控制文本的显示和隐藏。

2. 使用前端框架（如Vue.js、React等）：
- 在模板中定义一个初始高度限制的元素用于显示固定行数的文本，并绑定一个点击事件处理函数。
- 在组件的状态中维护一个变量来控制内容的展开和收起。
- 点击事件处理函数会切换状态变量，根据状态变量来动态更新文本显示区域的高度或内容，以及按钮显示的文本。

例如，在Vue.js中，可以通过以下方式实现：

<template>
  <div>
    <div v-if="!isExpanded" class="line-clamp">
      {{ truncatedText }}
      <span class="expand-link" @click="toggleExpand">···展开</span>
    </div>
    <div v-else class="expanded-content">
      {{ fullText }}
      <span class="collapse-link" @click="toggleExpand">收起</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullText: '这里是完整的文本内容...',
      truncatedText: '这里是截断后的文本内容...',
      isExpanded: false
    };
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
    }
  }
};
</script>

<style>
.line-clamp {
  /* CSS样式用于设置显示固定行数 */
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制在3行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.expand-link {
  /* 展开链接样式 */
  cursor: pointer;
}
</style>

在这个例子中，`.line-clamp` 类用于限制文本显示的行数，并通过 `-webkit-line-clamp` 属性实现。点击“···展开”时，通过 `toggleExpand` 方法切换 `isExpanded` 状态变量，从而控制显示完整的文本和“收起”按钮。