Working with Text
Cut off long text with "..." (ellipsis).
Skill ID: WorkingWithText_29
Description: If text is too long to fit, show the beginning and then "..."
Where to apply: Short descriptions in cards, long titles, table cells.
Key Tailwind Classes:
truncate
Gotcha:
truncate
only works reliably on a single line of text. For multi-line text truncation (showing "..." after 2 or 3 lines), you need the
@tailwindcss/line-clamp
plugin.
Example:
A normal paragraph that might be a bit long for its container, forcing a wrap:
This is a rather long piece of text that we expect to wrap normally within this small box.
The same text, but with
truncate
applied:
This is a rather long piece of text that we expect to wrap normally within this small box.
(Resize your browser window or inspect element if the box width isn't small enough to trigger truncation)
Another example with
truncate
. This text is definitely too long:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.