Text-Overflow Ellipsis Not Working? Check the Flex Item

You add text-overflow: ellipsis to a card title. The title keeps going. You add overflow: hidden and white-space: nowrap. Now the whole card gets wider, and the action button heads off-screen.

For text-overflow ellipsis not working, I’d check which box is refusing to shrink before giving the title another width. The three truncation declarations can be correct while the layout never gives them anything to truncate.

The example below is deliberately small and illustrative. It’s not a production incident or a measured UICuts result.

Text-overflow ellipsis not working: start with the text box

Ellipsis signals text that’s already overflowing. It doesn’t make a box smaller. MDN’s text-overflow reference explains that it applies to inline-direction overflow inside a block container, and isn’t inherited.

Start on the element holding the text line:

.card-title {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

If you’re styling an ordinary inline span or link, it may need display: block or inline-block and a usable width constraint. A heading already supplies a block box in normal flow. Putting ellipsis on the card wrapper won’t pass the property down to that heading.

A fixed pixel width isn’t required. Percentage widths, a responsive maximum width, or flex-allocated space can all provide a constraint. What matters is the result: the text has more content than its box has room for.

To check how much of a declared pixel width remains for text after padding and borders, try the CSS Box Sizing Calculator. Compare content-box and border-box before inspecting which flex item refuses to shrink.

The nested flex trap

Here’s a complete example you can paste into an HTML page:

<div class="card-row">
  <div class="card-copy">
    <h2 class="card-title">
      A very long project title that should not push the Open button away
    </h2>
    <p class="card-meta">Draft project</p>
  </div>
  <button class="card-action" type="button">Open</button>
</div>

.card-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 24rem;
}

.card-copy {
  flex: 1 1 0;
  min-width: 0; /* Let this flex item shrink below its content minimum. */
}

.card-title {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-meta {
  margin: 0;
}

.card-action {
  flex: 0 0 auto;
}

Remove min-width: 0 from .card-copy to investigate the failure. The heading’s clipping rules are still there. Its wrapper is the flex item, and the default automatic minimum size can keep that wrapper as wide as its non-wrapping title.

It’s the wrapper saying, “Sure, you can have less space. As long as it’s all the space.”

Restore min-width: 0 on .card-copy. The wrapper can now use the remaining row width, while .card-title handles clipping. These are separate responsibilities. MDN’s min-width reference describes the automatic minimum for flex and grid items, including exceptions for scroll containers and certain grid spans.

Don’t infer that every min-width: auto is broken. In this example, allowing shrinkage is intentional because the title is supposed to truncate. Other content may need its minimum size preserved.

What if another wrapper still blocks shrinking?

If .card-row is itself a flex item inside a larger horizontal layout, inspect that outer relationship too. An inner fix can’t force an outer flex item past its own minimum. Apply the override to the specific item blocking the intended width.

Avoid hiding overflow on the entire card as your first fix. That can clip controls or focus outlines along with the title. This is also where layout fixes can collide: the sticky-position debugging guide explains why ancestor overflow changes can affect scrolling behavior.

Inspect the failing viewport before editing source

Chrome’s CSS features reference covers the Styles and Computed panes. Use Styles to find the winning declaration and Computed to check what’s applied at the viewport where the title fails.

1. Select the text element. Confirm its display, white-space, overflow, and text-overflow values.
2. Check its rendered width. If the box expands to fit the title, investigate the constraint before changing ellipsis.
3. Select its parent and relevant ancestors. Identify which are flex items, then inspect their minimum widths and flex settings.
4. Toggle min-width: 0 on the suspected item in Styles. Keep the viewport and title unchanged so you’re testing one cause.
5. Restore the temporary change, edit the responsible source rule, and test again with short and long titles.

What you see	Next check
Title wraps onto another line	Winning white-space rule on the text box
Card grows and pushes the button away	Flex-item minimum width and available row width
Text clips without dots	Text-overflow on the actual text box; room for the ellipsis
Fix works until a breakpoint	Active layout, width, and minimum-size rules there

Test increased zoom and narrow viewports as well. If the button alone can’t fit, title truncation won’t solve the whole layout. The row may need to wrap or change arrangement.

Give your AI agent the box relationship

I’d send the selector and parent layout with the screenshot. Pixels can show the missing button; they don’t tell the agent which wrapper owns the minimum size.

Here’s a hypothetical handoff for the example above. Replace these selectors and findings with your actual inspection:

Text element: .card-title, an h2 inside .card-copy.
Applied title rules: overflow hidden, white-space nowrap,
text-overflow ellipsis.
Parent relationship: .card-copy is a flex item in .card-row.
Observed: the long title expands the row and pushes Open off-screen.
Temporary test: min-width: 0 on .card-copy permits title truncation.

Find the source rule for .card-copy and make the smallest suitable fix.
Keep Open visible and preserve its focus indicator.
Verify short and long titles at narrow and wide viewport sizes.
Keep the full title available in the project detail view.

If you’re working in Cursor, pair this report with targeting the relevant source files. With Claude Code, the structured UI context guidance gives the same report a place in a scoped coding session.

UICuts can capture selectors, computed styles, and DOM hierarchy, and include your annotation. You still need to reproduce the failure and test which ancestor prevents shrinking. It doesn’t diagnose the flex layout for you.

For Copilot, include the responsible component using the file-scoping approach. If Cascade is making the change, the Windsurf context guide covers handing over element data. With Cline, scoping the editing task helps keep a title fix from turning into a card redesign.

FAQ

Do I need width in pixels for ellipsis?

No. You need a constrained text box. The example uses a responsive row width with a maximum, then flex distributes the available space.

Should min-width: 0 go on the heading?

Only if the heading is the item whose minimum blocks shrinking. In this example, that’s .card-copy, its parent. The heading needs the truncation rules.

Why doesn’t this produce two-line truncation?

white-space: nowrap intentionally keeps one line. Multi-line clamping is a different requirement; don’t add a fixed height and expect text-overflow to signal vertical clipping.

Is truncating the title always a good fix?

No. If people need to compare similar titles, wrapping might be more useful. When you truncate, provide a way to read the full value with keyboard and touch interaction too. Don’t make a hover-only tooltip the only way to distinguish projects.

Can I just add overflow hidden to every parent?

That may hide the symptom while clipping other content. Allow the specific flex item to shrink, then clip the text box intentionally.

Key lessons learned

• Put truncation rules on the box holding the text line.
• Check available width before adding a fixed width.
• Allow the relevant flex item to shrink, including outer wrappers when necessary.
• Verify controls, focus indicators, and access to the full title alongside the dots.

For text-overflow ellipsis not working, inspect the text box and its flex relationship first. If you want to pass that evidence into your coding session, install UICuts from the homepage and annotate the intended result. Then try a longer title before calling the fix done.