v-ellipsis

简介

v-ellipsis 指令用于处理文本溢出时的省略显示效果，支持单行和多行文本的省略。当文本内容超出指定的行数时，将自动显示省略号。

基础用法

默认情况下，v-ellipsis 指令会将文本限制在单行显示，超出部分用省略号表示。

有青花瓷在的日子，人是不想出门的。我干脆关世界于门外，揽青花瓷于怀中。天天坐在窗前对它们讲薄脆的瓷话，永远都讲不够。话到辞穷处，不见辞不见穷，却有一片幽蓝，冷冷在目在耳在衣在心。它殷实的底气使我沉溺其间，并以此拒绝一个粘腻喧哗的世界。

查看代码

<script setup lang="ts">
import { ref } from 'vue'

const text = ref(
  '有青花瓷在的日子，人是不想出门的。我干脆关世界于门外，揽青花瓷于怀中。天天坐在窗前对它们讲薄脆的瓷话，永远都讲不够。话到辞穷处，不见辞不见穷，却有一片幽蓝，冷冷在目在耳在衣在心。它殷实的底气使我沉溺其间，并以此拒绝一个粘腻喧哗的世界。'
)
</script>

<template>
  <p class="text" v-ellipsis>
    {{ text }}
  </p>
</template>

<style scoped>
.text {
  width: 100%;
  border: 1px solid var(--vp-c-text-1);
  padding: 1rem;
  color: var(--vp-c-text-1);
  margin-bottom: 20px;
  border-radius: 8px;
}
</style>

多行省略

通过传递 lines 参数，可以设置最大显示行数。

有青花瓷在的日子，人是不想出门的。我干脆关世界于门外，揽青花瓷于怀中。天天坐在窗前对它们讲薄脆的瓷话，永远都讲不够。话到辞穷处，不见辞不见穷，却有一片幽蓝，冷冷在目在耳在衣在心。它殷实的底气使我沉溺其间，并以此拒绝一个粘腻喧哗的世界。

查看代码

<script setup lang="ts">
import { ref } from 'vue'

const text = ref(
  '有青花瓷在的日子，人是不想出门的。我干脆关世界于门外，揽青花瓷于怀中。天天坐在窗前对它们讲薄脆的瓷话，永远都讲不够。话到辞穷处，不见辞不见穷，却有一片幽蓝，冷冷在目在耳在衣在心。它殷实的底气使我沉溺其间，并以此拒绝一个粘腻喧哗的世界。'
)
</script>

<template>
  <p class="text-box" v-ellipsis="{ lines: 2 }">
    {{ text }}
  </p>
</template>

<style scoped>
.text-box {
  width: 100%;
  border: 1px solid var(--vp-c-text-1);
  color: var(--vp-c-text-1);
  margin-bottom: 20px;
  border-radius: 8px;
}
</style>

API

属性名	说明	类型	是否必选	默认值
lines	限制文本显示的最大行数，超出部分用省略号表示。	number	○	1

注意事项

注意

• 该指令会自动处理浏览器兼容性问题，对于不支持 -webkit-line-clamp 的浏览器，会使用 max-height 作为降级方案。