Text Truncate
You might say
If a title is too long, cut it off and show an ellipsis at the end.
Shorten text that cannot fit in the available spaceText truncation keeps a title or filename from breaking a compact layout, usually with an ellipsis. It hides information, so provide the full value when people may need it. Decide whether the limit is one line, several lines, or a fixed character count.
Know first
When to use it
- Long filename in a compact row
- Card title with a fixed height
- Table cell with limited widthThis is an example of an unusually long tag label
- Preview text where the full value is available elsewhere2026-product-plan-final-v3-final.sketch 2026-product-plan-final-v3…
When NOT to use it
- Cut off text that people must read to decide
- Truncate without any way to see the full value
- Use character limits when layout width is the real constraint
- Apply the same line limit to every type of content
Anatomy
Limited width+nowrap does not wrap+overflow hidden overflow=A very long title...
The container or max-width sets the boundary — without it there is nothing to cut
white-space: nowrap pins the text to a single line
overflow: hidden hides whatever spills past the edge
text-overflow: ellipsis drops a … right where the text gets cut
Variants
Ellipsis
a-file-name-that-goes-on-and-on-final.pdf
List titles and file names that won't fit on one line
Line Clamp
A card summary that stays at two lines no matter how long the content runs — -webkit-line-clamp cuts the rest and adds an ellipsis.
Card summaries that only need the first two lines
Full-text access
2026 Product Plan & Roadmap — Final Approved Version v32026 Product Plan & Roadmap — Final Approved Version v3
When truncation needs a full-text escape hatch; tooltips need keyboard and touch alternatives
Typical use cases
Filename
Card title
Table cell
Tags:
Published
Search result preview
Further reading