Truncate
Keep a long value on one line with an ellipsis, and reveal the full text on hover or tap when it does not fit. Built on Tooltip.
Contoso Pharmaceuticals and LaboratoriesFabrikamBlue Yonder Airlines, Lisbon office
<script setup lang="ts">import { UiCard, UiTruncate } from 'grani'</script> <template> <UiCard :padded="false" class="w-56"> <div class="flex flex-col divide-y divide-border"> <UiTruncate text="Contoso Pharmaceuticals and Laboratories" class="px-4 py-2 text-sm" /> <UiTruncate text="Fabrikam" class="px-4 py-2 text-sm" /> <UiTruncate text="Blue Yonder Airlines, Lisbon office" class="px-4 py-2 text-sm" /> </div> </UiCard></template>
Also called ellipsis, text overflow, truncated text.
Usage
<UiTruncate :text="text" /> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| text*string | The text; the whole of it goes to the tooltip while it is cut. |
Attributes are placed by the component itself: its description says where.
When to use another component
| When you need | Take |
|---|---|
| Markup in a slot | It handles its own cut (truncate on the element) |
| A date | UiDateCell |
| The label of a badge | Badge cuts it itself |
| Text that may wrap | Plain text |