Truncating long text with an ellipsis keeps a layout tidy, but it only works when the element can actually shrink and the overflow is controlled. The single-line case needs three properties together, and the flexbox case needs one more fix.
Before you start
You should be comfortable with display, width and flex. This article covers single- and multi-line truncation.
Step-by-step walkthrough
Step 1: Single-line ellipsis needs three properties
white-space: nowrap keeps the text on one line, overflow: hidden clips it, and text-overflow: ellipsis adds the ellipsis. Missing any one of them breaks the effect: without nowrap it wraps, without overflow: hidden it just overflows.
Step 2: Multi-line clamp
-webkit-line-clamp with display: -webkit-box and overflow: hidden truncates after a number of lines. It is widely supported despite the vendor prefix, and it is the standard way to limit a description to a few lines.
Step 3: Fix truncation inside flex
A flex item defaults to min-width: auto, which prevents it from shrinking below its content, so the text never overflows to be truncated. Set min-width: 0 on the flex item so it can shrink and the ellipsis appears. This is the most common truncation bug.
Worked scenario
The flex item can shrink, so the ellipsis works.
.row { display: flex; }
.row .label {
min-width: 0; /* allow shrinking below content size */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Walk through the example
Without min-width: 0, the flex item refuses to shrink and the text pushes the layout wide. Adding it lets the item shrink, and the three truncation properties clip and ellipsize. This combination is the reliable single-line truncation in a flex row.
Common mistake
Omitting min-width: 0 in a flex container, so the ellipsis never shows, or forgetting overflow: hidden, so the text overflows unclipped. Another is applying single-line properties and expecting multi-line clipping.
Verify the behavior
Reduce the container width and confirm the ellipsis appears and no overflow spills. In a flex row, remove min-width: 0 and confirm the layout breaks, then restore it. Test the multi-line clamp with more lines than the clamp allows.
Interview exercise
Why does text-overflow: ellipsis fail to show inside a flex item?
Answer and reasoning
Because a flex item has min-width: auto, which makes it refuse to shrink below its content’s width. If it never shrinks, the text never overflows the box, so there is nothing to truncate. Setting min-width: 0 lets the item shrink, and the ellipsis appears.
Continue learning
Compare text sizing in Responsive units and flex behavior in Flex minimum width. Read the MDN text-overflow documentation and try the HTML and CSS interview questions.