Detailed explanation
Text truncation with an ellipsis keeps titles, table cells, and card descriptions within limited space while indicating that more content exists. CSS truncation changes the visual presentation; it does not shorten the underlying text node. The two main approaches are single-line truncation using text-overflow and multi-line truncation using line clamping. In interviews, explain both the declarations and their layout prerequisites: an ellipsis appears only when the content exceeds the available space or permitted number of lines.
For one line, use `.single-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }`. Here, white-space prevents wrapping, overflow clips content outside the box, and text-overflow requests an ellipsis at the clipped inline end. The element needs a constrained available width, supplied by its parent, a width or max-width, or a layout track. A plain inline span generally needs display: block or inline-block to behave as the intended truncation box. text-overflow does not itself constrain width, cause overflow, or limit the number of lines.
For multiple lines, use `.multi-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }`. The legacy box display and vertical orientation work together with -webkit-line-clamp to restrict visible content to three lines and show an ellipsis when additional content is clipped. Despite the prefix, this combination is supported across modern browsers, including Firefox. Allow normal wrapping here; carrying over white-space: nowrap defeats the intended multi-line layout. The unprefixed line-clamp property is the standards-based direction, but check support for your target browsers rather than assuming it replaces the prefixed combination everywhere.
A frequent practical issue is flex or grid sizing: an item's automatic minimum width can prevent it from shrinking, so apply min-width: 0 to the relevant item when needed. For grid tracks, minmax(0, 1fr) can also help. Test short and long strings, narrow layouts, and zoom. Keep important information accessible through a full-detail view or an explicit expand control; a title attribute alone is not a reliable touch or keyboard solution. Interviewers value diagnosing these constraints more than simply reciting properties.
Key points to remember
- Single line: combine white-space: nowrap, overflow: hidden, and text-overflow: ellipsis.
- Constrain the available width; text-overflow does not create overflow itself.
- Multiple lines: combine display: -webkit-box, -webkit-box-orient: vertical, -webkit-line-clamp, and overflow: hidden.
- Use min-width: 0 on relevant flex or grid items if automatic minimum sizing prevents shrinking.
- CSS truncation preserves the text node; provide a reliable way to view important hidden content.
Common mistakes candidates make
- Adding text-overflow: ellipsis without preventing wrapping or constraining the available width.
- Using -webkit-line-clamp without its required display and orientation declarations, or retaining white-space: nowrap.
- Assuming a fixed height plus overflow: hidden produces a multi-line ellipsis; it only clips content.
Likely follow-up questions
Why does ellipsis often fail inside a flex container?
The flex item's automatic minimum width may prevent it from shrinking enough to overflow internally. Set min-width: 0 on the relevant flex item and apply the truncation declarations to the element containing the text.
Can I use the unprefixed line-clamp property instead?
Check its support in your target browsers before relying on it alone. The widely supported prefixed combination remains a practical compatibility option.
Does truncation remove the hidden text for screen readers?
CSS truncation does not remove text from the DOM, and screen readers generally still have access to the full text. Provide an accessible expand control or detail view so sighted keyboard and touch users can also access it.
Interview tip: Present both CSS patterns, explain why their declarations work together, and finish with the min-width: 0 debugging case.