Truncate overflowing text with an ellipsis

A long username breaks a card wide open.

BeginnerRead 5 minDoing: 20 to 30 minutes5 steps

▶ Start

What you'll have at the end

Long text that stops at the edge of its box and shows one clean ellipsis instead of wrapping or spilling out

Before you start

You need

A card, list row, or similar box with a fixed or max width and a text label whose length you don't fully control, such as a username, a title, or a short bio, that you can add CSS rules to.

Not covered

This does not cover choosing Flexbox over Grid for the row itself, or building a fully accessible reveal pattern for touch and keyboard users; it only covers making the CSS ellipsis actually clip in every layout you put it in, plus a plain way to show a mouse user what got cut off.

Leans on

CSS Cheat SheetCarries the overflow, white-space and text-overflow properties this whole fix rests on, plus the flex-item row behind this recipe's flex-row gotcha.
CSS Flexbox Layout Cheat SheetCarries the multi-line clamp row the last step in this recipe builds on.
HTML Cheat SheetCarries the title attribute's own row, the one the mouse-only step points at directly.

5 steps

Checked 20 Aug 2026

Part of the CSS cookbook