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.
| Prop | Type | Default | |
|---|---|---|---|
children |
string |
Must be a string, so it can go in the title |
|
lines |
number |
1 |
Cut after this many |
title |
string |
the text | Pass "" to silence the tooltip |