Text Overflow
How text is displayed when it extends beyond its container, typically truncated with an ellipsis.
Plain English
Text overflow is the discipline of handling text that doesn't fit its container. In a card grid, you can't predict how long a title will be — it might be "Submit" or "Update your billing information for the Enterprise plan". Without overflow handling, long text breaks the layout. The ellipsis trick (…) truncates text gracefully, signalling to the user that there is more content without blowing up the design.
Technical
Single-line truncation requires three properties working together: overflow: hidden (clips the overflow), white-space: nowrap (prevents line wrapping), and text-overflow: ellipsis (shows the "…" character). Multi-line clamp uses the -webkit-line-clamp property (now widely supported): display: -webkit-box + -webkit-box-orient: vertical + overflow: hidden + -webkit-line-clamp: N. The N sets the number of lines before truncation.
Live Demo
Text overflow handling
overflow-visibleText escapes the box — visual glitch
This is an extremely long piece of text that will not fit inside the container
overflow-hiddenSilently cut off — reader confused
This is an extremely long piece of text that will not fit inside the container
truncate (ellipsis)Clean "…" signals more content exists
This is an extremely long piece of text that will not fit inside the container
Always truncate text with an ellipsis when truncating — never just cut it off.
Usage
✓ Good usage
Apply 2-line clamp to card description text so the grid stays uniform regardless of content length, with an ellipsis indicating more exists.
✗ Bad usage
Clamping the main H1 headline to one line — truncated headings confuse users; rewrite the copy or reduce the font size instead.
Recommended values
- Single-line: overflow: hidden + white-space: nowrap + text-overflow: ellipsis
- 2-line clamp: -webkit-line-clamp: 2 (card descriptions)
- 3-line clamp: -webkit-line-clamp: 3 (longer preview text)
- No clamp on headings — reduce font size or shorten copy instead
Common mistakes
- Forgetting white-space: nowrap when applying single-line truncation — without it the text wraps instead of truncating.
- Clamping headings — use short copy or responsive font sizes instead.
- Clamping to 1 line on mobile but not desktop — test at all widths.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Clamp card titles to 1 line (overflow: hidden, white-space: nowrap, text-overflow: ellipsis) and card descriptions to 2 lines (-webkit-line-clamp: 2). All cards maintain equal height regardless of content length.