Working with Text: `truncate`
Card Example:
This is an extremely long and descriptive title for a card item that needs to be truncated to prevent layout issues.
The title above uses the `truncate` class. It will be cut off with "..." if it's too long for one line. Hover over the title to see the full text (via HTML `title` attribute).
Table Cell Example:
| Item | Description |
|---|---|
| Short Item | This is a relatively short description, but we'll apply truncate just in case. |
| Long Item Name That Might Need Truncation | This description is intentionally made very long to demonstrate how the truncate class effectively cuts off the text and adds an ellipsis at the end, ensuring it fits neatly within the confines of the table cell without disrupting the overall layout of the table or the page. |
| Another Item | A standard length description. |
In the table above, the "Description" column for the "Long Item" uses `truncate`.