vue实现缩略div
Vue 实现缩略 Div 的方法
使用 CSS 控制文本溢出
通过 CSS 的 text-overflow 属性可以实现文本缩略显示。结合 white-space 和 overflow 属性，确保文本在超出容器时显示省略号。
<template>
<div class="truncate-text">
{{ longText }}
</div>
</template>
<style>
.truncate-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px; /* 设置固定宽度 */
}
</style>动态控制缩略与展开
通过 Vue 的 v-if 或 v-show 结合按钮切换，实现动态展开和缩略效果。
<template>
<div>
<p v-if="isExpanded">{{ longText }}</p>
<p v-else>{{ truncatedText }}</p>
<button @click="isExpanded = !isExpanded">
{{ isExpanded ? '收起' : '展开' }}
</button>
</div>
</template>
<script>
export default {
data() {
return {
longText: '这是一段很长的文本，需要在某些情况下缩略显示。',
isExpanded: false
};
},
computed: {
truncatedText() {
return this.longText.slice(0, 10) + '...';
}
}
};
</script>使用第三方库（如 vue-text-clamp）
对于更复杂的需求，可以使用第三方库如 vue-text-clamp，它提供了更灵活的文本截断功能。
安装库：
npm install vue-text-clamp使用示例：
<template>
<text-clamp :text="longText" :max-lines="2" />
</template>
<script>
import TextClamp from 'vue-text-clamp';
export default {
components: { TextClamp },
data() {
return {
longText: '这是一段很长的文本，需要在某些情况下缩略显示。'
};
}
};
</script>结合 Tailwind CSS 实现
如果项目使用 Tailwind CSS，可以通过其内置的 truncate 类快速实现缩略效果。
<template>
<div class="truncate w-48">
{{ longText }}
</div>
</template>注意事项
- 固定宽度或高度是文本缩略的必要条件，确保容器有明确的尺寸限制。
- 动态展开/收起功能需要合理管理状态，避免频繁的 DOM 操作。
- 第三方库可能带来额外的体积，根据项目需求权衡使用。
