Components
Ellipsis
The overflow knife: text cut at one line, or held to N lines. The primitive only draws the cut — reaching the full text (title, tooltip) stays the consumer's decision.
#Basic usage
A long chapter title walks into a narrow column and leaves its tail at the door
<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>
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.
<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>
#Props
#Ellipsis
| Prop | Type | Default | Description |
|---|---|---|---|
lines | Number | 1 | — |