Text Overflow
Overview
In dynamic applications, you often receive data from a database (like a user's name or a blog post title) that is significantly longer than the UI box you designed for it. If you don't control text overflow, the long text will either push your layout apart or violently bleed over the edges of its container. Modern CSS provides elegant ways to truncate text, adding automatic '...' (ellipses) or wrapping it safely.
Syntax
/*
1. SINGLE-LINE TRUNCATION
(The Holy Trinity: You absolutely MUST have all 3 properties for this to work)
*/
.truncate-single {
white-space: nowrap; /* 1. Forces text to stay on one straight line */
overflow: hidden; /* 2. Hides anything that bleeds out of the box */
text-overflow: ellipsis; /* 3. Replaces the cut-off text with '...' */
}
/*
2. MULTI-LINE TRUNCATION (Line Clamping)
(Truncates the text only after it reaches exactly 3 lines)
*/
.truncate-multi {
display: -webkit-box;
-webkit-line-clamp: 3; /* Stop after 3 lines */
-webkit-box-orient: vertical;
overflow: hidden;
}
/*
3. WORD BREAKING
(Forces a massive word like a URL to snap and wrap to the next line)
*/
.break-long-words {
word-break: break-all;
}Common Pitfalls
- Trying to use
text-overflow: ellipsis;withoutoverflow: hidden;.text-overflowonly dictates what to draw when overflow occurs. If you don't explicitly hide the overflow, the ellipsis will never trigger. - Trying to apply single-line truncation to a Flex container directly. The text will just stretch the flex container instead of truncating. You must apply
min-width: 0;to the flex child to allow it to shrink and trigger the truncation.
Interview Questions
-webkit- prefixes for multi-line clamping (-webkit-line-clamp) in 2026?Multi-line clamping was originally a proprietary Apple WebKit invention. It became so insanely popular and useful that instead of inventing a new standard, the CSS working group officially standardized the -webkit- prefixed version across all browsers (including Firefox and Edge).
Real-World Example
Preventing user-generated content from breaking a profile card.
/* A user inputs a massive unbroken string: "Hahahahahahahaha..." */
.user-bio {
width: 250px;
/* Standard wrapping usually only breaks at spaces.
This forces the browser to brutally chop the word mid-letter
to prevent it from destroying the layout width. */
overflow-wrap: break-word;
hyphens: auto; /* Adds a clean '-' where it chops the word! */
}Check Your Knowledge
Test your understanding of Text Overflow with these quick questions.