What does it take to make a single line of text truncate with text-overflow: ellipsis when that text lives inside a flex item?

middleshould knowfreq 52%

answer

it needs three declarations, not one
one line, clipped, then marked
the box must actually be too small
a flex item widens to fit its text
min-width: 0 up the chain

basics

~20 s

Three declarations on the block element holding the text — overflow: hidden, white-space: nowrap, text-overflow: ellipsis — plus min-width: 0 on every row-direction flex item above it, so the box is allowed to be narrower than the text.

solid answer

~50 s

Truncation needs two independent things to be true. First the classic recipe on the element that contains the text: white-space: nowrap so it stays on one line, overflow: hidden so the line is clipped, and text-overflow: ellipsis to render the marker. text-overflow applies to block containers, so it goes on a child that holds inline content — putting it on the flex container itself does nothing to its flex items. Second, that element must actually be narrower than the text, and inside a row-direction flex layout it usually is not: every flex item defaults to min-width: auto, a content-based floor, so the item widens to fit the whole string and there is no overflow to clip. Adding min-width: 0 to each flex item in the chain lets it shrink, and only then does the ellipsis appear. overflow: hidden on the item has the same releasing effect.

Truncation needs two independent things to be true. First the classic recipe on the element that contains the text: `white-space: nowrap` so it stays on one line, `overflow: hidden` so the line is clipped, and `text-overflow: ellipsis` to render the marker. `text-overflow` applies to block containers, so it goes on a child that holds inline content — putting it on the flex container itself does nothing to its flex items. Second, that element must actually be narrower than the text, and inside a row-direction flex layout it usually is not: every flex item defaults to `min-width: auto`, a content-based floor, so the item widens to fit the whole string and there is no overflow to clip. Adding `min-width: 0` to each flex item in the chain lets it shrink, and only then does the ellipsis appear. `overflow: hidden` on the item has the same releasing effect.

code

css · 22 lines

css

.row {
  display: flex;
  gap: 0.5rem;
}

/* Allowed to be narrower than its text. */
.row > .title {
  flex: 1;
  min-width: 0;
}

/* The block that actually holds the inline text. */
.row > .title > .label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keeps its size so the title absorbs the squeeze. */
.row > .action {
  flex-shrink: 0;
}

go deeper

for a junior

Memorise the three-property recipe — white-space: nowrap, overflow: hidden, text-overflow: ellipsis — and be able to say which element it goes on: the block holding the text, not the flex container.

for a middle

Explain why each property is required and why nothing truncates until the box is genuinely too small; connect the failure to the flex item's default min-width: auto and the min-width: 0 release.

for a senior

Discuss the whole pattern in a real row: a growing title with min-width: 0 beside a flex-shrink: 0 action, plus keeping the full string available for assistive technology and tooltips.

for a principal

Decide where truncation lives as a system concern: a shared truncating-text primitive, the rule that clipped content stays accessible elsewhere, and when a design should shorten copy rather than rely on CSS to hide it.

Two separate requirements

Almost every "my ellipsis does not work" bug is one of two failures, and they are unrelated to each other:

The truncation recipe is incomplete or on the wrong element.
The box never overflows, because flex layout let it grow to fit the text.

Solving one without the other leaves the bug in place, which is why the fix can feel like guesswork.

The recipe, and why all three are needed

css

.label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

white-space: nowrap keeps the text on a single line. Without it the text wraps, the box grows taller, and there is no horizontal overflow to truncate — the most common single omission.
overflow: hidden (or any non-visible value) is what clips the line. text-overflow only takes effect on a block container with non-visible overflow; with overflow: visible the text simply spills and no ellipsis is drawn.
text-overflow: ellipsis chooses the marker rendered at the clipped edge instead of a hard cut.

An important detail for flex layouts: text-overflow applies to block containers. A flex container is not a block container for its children — its children are flex items — so text-overflow: ellipsis set on the flex container does not truncate the items inside it. The recipe belongs on the element that directly wraps the inline text, which usually means introducing a <span> or <div> for the label rather than styling the flex container.

Why the box does not overflow in flex layout

The second half of the problem is the flex item's automatic minimum size. min-width keeps its initial value auto, and on a flex item auto resolves to a content-based floor rather than to zero. For a nowrap line of text that floor is the width of the entire string, so the item stays as wide as its text no matter how tight the container is. No overflow, no clipping, no ellipsis — the row simply blows out.

css

.row  { display: flex; }
.row > .grow { flex: 1; min-width: 0; }  /* now .grow can be narrower than its text */
.row > .grow > .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

min-width: 0 is the explicit release. overflow: hidden on the item achieves the same thing implicitly, since a non-visible overflow zeroes the automatic minimum size — which is why sometimes the recipe alone appears to work: if the truncating element is the flex item, its own overflow: hidden released the floor as a side effect. In deeper trees, where the label sits several wrappers below the flex item, that accident does not happen and you must release each intermediate flex item yourself.

Common variations that come up

The item with a fixed neighbour. A row with a truncating title and a fixed-size action button: give the title flex: 1; min-width: 0 and the button flex-shrink: 0 so the button keeps its size and the title absorbs the squeeze.

Multi-line truncation. text-overflow: ellipsis is single-line only. For a clamp after N lines the tool is display: -webkit-box with -webkit-line-clamp and -webkit-box-orient: vertical — historically prefixed but broadly supported, and note that turning the box into a -webkit-box changes how its own children lay out.

Titles and accessibility. A truncated string is visually incomplete, so the full text should remain available — commonly by mirroring it into a title attribute or by keeping the full string in the accessible name. Clipping is a visual treatment, not a content decision.

Direction. The ellipsis is placed at the end edge of the line, which follows the writing direction, so in a right-to-left context it appears on the left. That falls out of the inline direction; you do not configure it.

Diagnosing it in ten seconds

Inspect the element with the recipe on it and check its used width against the parent's. If they are equal and both are as wide as the text, the automatic minimum size is the problem — go up the tree and set min-width: 0 on the flex items. If the element is genuinely narrower than its content but still shows no ellipsis, look at the recipe: is white-space still normal, is overflow still visible, or is text-overflow sitting on a flex container instead of on the block that holds the text?

## Two separate requirements Almost every "my ellipsis does not work" bug is one of two failures, and they are unrelated to each other: 1. The **truncation recipe** is incomplete or on the wrong element. 2. The box **never overflows**, because flex layout let it grow to fit the text. Solving one without the other leaves the bug in place, which is why the fix can feel like guesswork. ## The recipe, and why all three are needed ```css .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` - `white-space: nowrap` keeps the text on a single line. Without it the text wraps, the box grows taller, and there is no horizontal overflow to truncate — the most common single omission. - `overflow: hidden` (or any non-`visible` value) is what clips the line. `text-overflow` only takes effect on a block container with non-visible overflow; with `overflow: visible` the text simply spills and no ellipsis is drawn. - `text-overflow: ellipsis` chooses the marker rendered at the clipped edge instead of a hard cut. An important detail for flex layouts: `text-overflow` applies to **block containers**. A flex container is not a block container for its children — its children are flex items — so `text-overflow: ellipsis` set on the flex container does not truncate the items inside it. The recipe belongs on the element that directly wraps the inline text, which usually means introducing a `<span>` or `<div>` for the label rather than styling the flex container. ## Why the box does not overflow in flex layout The second half of the problem is the flex item's **automatic minimum size**. `min-width` keeps its initial value `auto`, and on a flex item `auto` resolves to a content-based floor rather than to zero. For a nowrap line of text that floor is the width of the entire string, so the item stays as wide as its text no matter how tight the container is. No overflow, no clipping, no ellipsis — the row simply blows out. ```css .row { display: flex; } .row > .grow { flex: 1; min-width: 0; } /* now .grow can be narrower than its text */ .row > .grow > .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` `min-width: 0` is the explicit release. `overflow: hidden` on the item achieves the same thing implicitly, since a non-visible overflow zeroes the automatic minimum size — which is why sometimes the recipe alone appears to work: if the truncating element *is* the flex item, its own `overflow: hidden` released the floor as a side effect. In deeper trees, where the label sits several wrappers below the flex item, that accident does not happen and you must release each intermediate flex item yourself. ## Common variations that come up **The item with a fixed neighbour.** A row with a truncating title and a fixed-size action button: give the title `flex: 1; min-width: 0` and the button `flex-shrink: 0` so the button keeps its size and the title absorbs the squeeze. **Multi-line truncation.** `text-overflow: ellipsis` is single-line only. For a clamp after N lines the tool is `display: -webkit-box` with `-webkit-line-clamp` and `-webkit-box-orient: vertical` — historically prefixed but broadly supported, and note that turning the box into a `-webkit-box` changes how its own children lay out. **Titles and accessibility.** A truncated string is visually incomplete, so the full text should remain available — commonly by mirroring it into a `title` attribute or by keeping the full string in the accessible name. Clipping is a visual treatment, not a content decision. **Direction.** The ellipsis is placed at the end edge of the line, which follows the writing direction, so in a right-to-left context it appears on the left. That falls out of the inline direction; you do not configure it. ## Diagnosing it in ten seconds Inspect the element with the recipe on it and check its used width against the parent's. If they are equal and both are as wide as the text, the automatic minimum size is the problem — go up the tree and set `min-width: 0` on the flex items. If the element is genuinely narrower than its content but still shows no ellipsis, look at the recipe: is `white-space` still `normal`, is `overflow` still `visible`, or is `text-overflow` sitting on a flex container instead of on the block that holds the text?

Why does putting text-overflow: ellipsis on the flex container itself do nothing?
`text-overflow` applies to block containers and acts on the inline content they lay out. A flex container lays out flex items, not an inline formatting context, so the property has nothing to truncate there. The declaration must sit on the block element that directly contains the text — usually a child element you add for that purpose.
How would you truncate after three lines instead of one?
`text-overflow: ellipsis` is single-line only. The usual approach is `display: -webkit-box` together with `-webkit-line-clamp: 3`, `-webkit-box-orient: vertical`, and `overflow: hidden`. It is broadly supported despite the prefix, but be aware it changes the element's inner layout model, so it is best applied to a leaf element holding only text.
What do you do about the text that is now hidden from the user?
Keep it retrievable: mirroring the full string into a `title` attribute is the common minimum, and any accessible name for the control should carry the untruncated text. Truncation is a visual treatment — screen-reader users still read the full string, so the CSS must not be the only place the complete value exists.

saying these in an interview costs you the question

Setting text-overflow: ellipsis without white-space: nowrap
Expecting truncation while overflow is still visible
Putting the ellipsis recipe on the flex container instead of a text block
Assuming flex-shrink alone will narrow the item enough to overflow
Thinking text-overflow: ellipsis can clamp multiple lines

What does it take to make a single line of text truncate with text-overflow: ellipsis when that text lives inside a flex item?

§ answer

basics

solid answer

code

§ go deeper

▾level notes4 levels

▾deep dive~4 min

Two separate requirements

The recipe, and why all three are needed

Why the box does not overflow in flex layout

Common variations that come up

Diagnosing it in ten seconds

▾common follow-ups3 questions

▾red flags5 flags

§ context

▾related questions4 questions

▾related topics3 topics

Two separate requirements

The recipe, and why all three are needed

Why the box does not overflow in flex layout

Common variations that come up

Diagnosing it in ten seconds

answer

go deeper

context