You can use the text-overflow property in combination with overflow: hidden and white-space: nowrap to display an ellipsis (...) when text exceeds the width of its container. This technique ensures that long text is visually truncated while maintaining layout integrity.

Required CSS Properties

1
overflow: hidden — hides the overflowing text beyond the container.
2
white-space: nowrap — prevents text from wrapping to the next line.
3
text-overflow: ellipsis — displays an ellipsis (...) where the text is cut off.

Example: Text truncation with ellipsis

Difficulty: 4/10

Topics: text-overflow, overflow handling, responsive UI

Scenario Questions

0-2 years experience

1
You have a navigation bar with menu items that sometimes have long labels. How would you ensure the text truncates with an ellipsis without breaking the layout?
2
If you set overflow: hidden on a div but forget to add text-overflow: ellipsis, what will the user see when the content exceeds the width?

2-5 years experience

1
We noticed that some product cards are cutting off text abruptly after a recent CSS refactor. Walk me through how you would debug why the ellipsis isn’t appearing.
2
When implementing a responsive table, you need to truncate cell content with an ellipsis but also allow users to see the full text on hover. How would you combine overflow properties and other CSS to achieve this?

5-8 years experience

1
Our design system includes a reusable Truncate component used across dozens of pages. What edge cases would you consider (e.g., multi‑line, RTL, accessibility) and how would you implement a robust solution?
2
Discuss the performance implications of using text-overflow: ellipsis on a page with thousands of dynamically generated list items. How would you mitigate any rendering issues?

8+ years experience

1
We are migrating a legacy monolithic UI to a component library that must support multiple themes and internationalization. How would you architect the truncation behavior to be consistent, maintainable, and avoid theme‑specific bugs?
2
Explain how you would set up automated visual regression testing for ellipsis behavior across browsers and screen densities, and what fallback strategies you’d employ for browsers that don’t support text-overflow.

Follow-up Questions

❓How does the `white-space` property influence whether the ellipsis appears?
❓What would you see if the element were `display: inline` instead of block or inline‑block?
❓Can you achieve similar truncation with JavaScript, and what trade‑offs does that involve?