HTML & CSS · Middle · Question 5 of 75

Inside a flex item, long text with `text-overflow: ellipsis` doesn't truncate and stretches the column instead. How do you fix it?

✓Correct answer: Give the flex item min-width: 0 (or overflow: hidden)
2Give the flex item flex-shrink: 0 so it doesn't shrink
3Change the container from display: flex to display: inline-flex

Explanation

Flex items have min-width: auto by default - they won't shrink below their minimum content. A long word or a white-space: nowrap line stretches the item. min-width: 0 allows shrinking, and then ellipsis kicks in. flex-shrink: 0 would only make it worse.

Inside a flex item, long text with `text-overflow: ellipsis` doesn't truncate and stretches the column instead. How do you fix it?

Explanation

Further reading

Problem with a question

Test yourself

Inside a flex item, long text with text-overflow: ellipsis doesn't truncate and stretches the column instead. How do you fix it?

Explanation

Further reading

Test yourself

Inside a flex item, long text with `text-overflow: ellipsis` doesn't truncate and stretches the column instead. How do you fix it?