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: 2/10

Topics: text-overflow, CSS layout, responsive design

Scenario Questions

0-2 years experience

1
We have a button with a fixed width, and the label text sometimes is longer than the button. How would you ensure the text is truncated with an ellipsis without breaking the layout?
2
If you apply text-overflow: ellipsis but the text still wraps onto a second line, what might you be missing in your CSS?

2-5 years experience

1
You added text-overflow: ellipsis to a card component, but in some browsers the ellipsis doesn't appear when the component is inside a flex container. How would you debug and fix this?
2
Our design requires multiline truncation with an ellipsis after three lines of text. What CSS approaches could you take, and what are the trade‑offs?

5-8 years experience

1
We're building a large dashboard with many reusable components that need consistent truncation behavior. How would you design a CSS utility or pattern to enforce ellipsis across the app while handling RTL languages and accessibility?
2
A performance audit shows that many components use overflow: hidden and white-space: nowrap causing layout thrashing during window resize. How would you mitigate the impact while still providing ellipsis truncation?

8+ years experience

1
Our legacy product uses a mix of custom CSS and third‑party UI libraries, and we need to migrate to a design system that standardizes text truncation. What strategy would you propose to roll out consistent ellipsis behavior across teams without breaking existing pages?
2
Considering future theming and internationalization, how would you architect the CSS (or CSS‑in‑JS) to support configurable truncation rules (e.g., max lines, different ellipsis characters) at scale?

Follow-up Questions

❓What impact does `white-space: nowrap` have on screen readers?
❓How would you test that the ellipsis works across different browsers and devices?
❓Can you think of any scenarios where truncating text might cause usability issues?