当前位置：首页 > VUE

vue实现文本截断

2026-01-19 18:13:53VUE

文本截断的实现方法

在Vue中实现文本截断可以通过多种方式完成，以下是几种常见的方法：

CSS方法 使用CSS的text-overflow属性可以简单实现文本截断效果：

vue实现文本截断

<div class="truncate-text">
  {{ longText }}
</div>

.truncate-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px; /* 或其他固定宽度 */
}

自定义组件方法 创建可复用的截断组件，支持多行截断和自定义截断符号：

vue实现文本截断

<template>
  <div class="truncate-wrapper" :style="{'-webkit-line-clamp': lines}">
    {{ truncatedText }}
  </div>
</template>

<script>
export default {
  props: {
    text: String,
    length: {
      type: Number,
      default: 50
    },
    lines: {
      type: Number,
      default: 1
    }
  },
  computed: {
    truncatedText() {
      return this.text.length > this.length 
        ? this.text.slice(0, this.length) + '...'
        : this.text;
    }
  }
}
</script>

<style>
.truncate-wrapper {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>

使用第三方库 对于更复杂的需求，可以考虑使用专门处理文本截断的库，如vue-clamp：

npm install vue-clamp

<template>
  <v-clamp autoresize :max-lines="3">
    {{ longText }}
  </v-clamp>
</template>

<script>
import VClamp from 'vue-clamp'
export default {
  components: { VClamp }
}
</script>

响应式截断 结合ResizeObserver实现响应式截断，根据容器宽度动态调整：

<template>
  <div ref="container" class="responsive-truncate">
    <span ref="text">{{ longText }}</span>
  </div>
</template>

<script>
export default {
  mounted() {
    const observer = new ResizeObserver(entries => {
      const container = entries[0].target
      const textSpan = this.$refs.text
      if (textSpan.scrollWidth > container.clientWidth) {
        textSpan.textContent = this.truncateText(textSpan.textContent, container.clientWidth)
      }
    })
    observer.observe(this.$ref.container)
  },
  methods: {
    truncateText(text, maxWidth) {
      // 实现根据宽度计算截断位置的逻辑
    }
  }
}
</script>