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 rowFinal confirmed version of the 2026 product plan and roadmapThis plan focuses on rebuilding the curriculum, upgrading hands-on projects, and running the community. See the appendix for the detailed schedule and owners.Truncate the title to one line and the summary to two.
- Card title with a fixed heightA title may truncate to one line, but provide a way to view the full name.
- 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 decideThe amount and date are truncated, leaving key information incomplete.
- Truncate without any way to see the full valueIt is truncated, not clickable, and offers no hint—where can I read the full text?
- Use character limits when layout width is the real constraint
- Apply the same line limit to every type of contentA title with only text-overflow: ellipsis still wraps and overflows.All three are required: overflow + nowrap + ellipsis.
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
