当前位置：首页 > VUE

vue实现文本折叠

2026-01-17 00:04:22VUE

实现文本折叠的基本思路

文本折叠功能通常涉及控制文本的显示高度，超出指定行数后显示“展开/收起”按钮。Vue中可以通过动态绑定CSS样式和条件渲染实现这一效果。

使用CSS控制文本行数

通过CSS的-webkit-line-clamp属性限制文本显示行数，结合overflow: hidden实现折叠效果：

<template>
  <div>
    <div 
      :class="{'text-collapse': isCollapsed}" 
      ref="content"
    >
      {{ longText }}
    </div>
    <button @click="toggleCollapse">
      {{ isCollapsed ? '展开' : '收起' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      longText: '这里是需要折叠的长文本内容...',
      isCollapsed: true
    }
  },
  methods: {
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed
    }
  }
}
</script>

<style>
.text-collapse {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>

动态计算是否需要折叠

对于不确定长度的文本，可通过计算文本高度决定是否需要显示折叠按钮：

<template>
  <div>
    <div 
      :style="{ height: isCollapsed ? maxHeight + 'px' : 'auto' }"
      ref="content"
      class="content"
    >
      {{ longText }}
    </div>
    <button 
      v-if="showToggle"
      @click="toggleCollapse"
    >
      {{ isCollapsed ? '展开' : '收起' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      longText: '长文本内容...',
      isCollapsed: true,
      showToggle: false,
      maxHeight: 60
    }
  },
  mounted() {
    this.checkOverflow()
  },
  methods: {
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed
    },
    checkOverflow() {
      const el = this.$refs.content
      this.showToggle = el.scrollHeight > el.clientHeight
    }
  }
}
</script>

<style>
.content {
  overflow: hidden;
  transition: height 0.3s ease;
}
</style>

使用第三方库

对于更复杂的需求，可以考虑使用专门处理文本折叠的Vue组件库：

vue实现文本折叠

vue-text-collapse
安装：npm install vue-text-collapse
使用示例：

<template>
  <text-collapse 
    :text="longText" 
    :length="100"
  />
</template>

clamp.js
通过指令方式实现：

vue实现文本折叠

import clamp from 'clamp-js'

export default {
  directives: {
    clamp: {
      inserted(el, binding) {
        clamp(el, { clamp: binding.value || 3 })
      }
    }
  }
}

模板中使用：

<div v-clamp>长文本内容...</div>

动画过渡效果

为折叠/展开添加平滑动画：

<template>
  <div>
    <div 
      class="content"
      :style="{ maxHeight: isCollapsed ? '60px' : 'none' }"
    >
      {{ longText }}
    </div>
    <button @click="toggleCollapse">
      {{ isCollapsed ? '展开' : '收起' }}
    </button>
  </div>
</template>

<style>
.content {
  overflow: hidden;
  transition: max-height 0.5s ease;
}
</style>

多行文本省略方案

纯CSS实现多行省略（兼容性方案）：

.ellipsis {
  position: relative;
  line-height: 1.4em;
  max-height: 4.2em; /* 3行 */
  overflow: hidden;
}
.ellipsis::after {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
  background: white;
  padding: 0 5px;
}