文本省略 Ellipsis

#基础用法

A long chapter title walks into a narrow column and leaves its tail at the door

ellipsis/basic.vue

<script setup lang="ts">
import { Ellipsis } from "@bysages/vue";

const title = "A long chapter title walks into a narrow column and leaves its tail at the door";
</script>

<template>
  <div class="w-80">
    <Ellipsis :title="title">{{ title }}</Ellipsis>
  </div>
</template>

ellipsis/lines Vue React

The vessel holds the page the way a column holds ink: fully, and only up to its brim. Whatever runs past the measure gives way, and the cut is drawn so quietly that the reader finishes the sentence from memory instead of the margin.The vessel holds the page the way a column holds ink: fully, and only up to its brim. Whatever runs past the measure gives way, and the cut is drawn so quietly that the reader finishes the sentence from memory instead of the margin.

ellipsis/lines.vue

<script setup lang="ts">
import { Ellipsis } from "@bysages/vue";

const prose =
  "The vessel holds the page the way a column holds ink: fully, and only up to its brim. " +
  "Whatever runs past the measure gives way, and the cut is drawn so quietly that the reader " +
  "finishes the sentence from memory instead of the margin.";
</script>

<template>
  <div class="grid grid-cols-2 gap-4 w-full">
    <Ellipsis :lines="2">{{ prose }}</Ellipsis>
    <Ellipsis :lines="4">{{ prose }}</Ellipsis>
  </div>
</template>

#属性

#Ellipsis

属性	类型	默认值	描述
`lines`	`Number`	`1`	—