Truncate
$ npx shadcn@latest add https://lacodda.github.io/dowel/r/truncate.jsonThe cut text is still available. The element carries its own text as a
title, so hovering shows what was lost. Every product wrote the one-line
version of this and none of them remembered that part — cutting text without a
way to read it is losing it.
lines needs a different mechanism, not a different value. One line is
truncate; more than one is line-clamp, which is why it is a prop rather
than something you write yourself.
<Truncate lines={2}>{description}</Truncate>Pass title="" where the full text is already on screen and the tooltip would
be noise.
Props
Read from the types in ui/truncate.tsx, the file a product copies - so the description of each prop is also what an editor shows over it there.
| Prop | Type | Default | |
|---|---|---|---|
childrenrequired | string | The text. A string, because the component has to be able to put it in a title - arbitrary children could not be. | |
lines | number | 1 | Cut after this many lines. One by default. |
title | string | Say what the full text is on hover. On by default; turn it off where the text is already visible elsewhere, or the tooltip is noise. |
And every prop of React's HTMLAttributes<HTMLSpanElement>, passed on.
Accessibility
The examples on the stand, through axe 4.14.0 in a browser, in both themes, against WCAG 2.2 A and AA and axe's best practices: 5 rules applied and passed, and none failed. The accessibility report has every item.
History
Each release that changed ui/truncate.tsx - the file a product copies - newest first.