How can you hide overflowing text with ellipsis using CSS?

Q: How can you hide overflowing text with ellipsis using CSS?

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. `overflow: hidden` — hides the overflowing text beyond the container. `white-space: nowrap` — prevents text from wrapping to the next line. `text-overflow: ellipsis` — displays an ellipsis (`...`) where the text is cut off. .ellipsis-box { width: 200px; border: 1px solid #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 5px; } This is a long line of text that will be truncated with an ellipsis when it overflows.

Difficulty: 2/10

text-overflow, CSS layout, responsive design

Hiding overflowing text with an ellipsis

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

Scenario Questions

0-2 years experience

2-5 years experience

1You 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?

Follow-up Questions