In CSS, why does text-overflow: ellipsis on its own not truncate a long line, and what else must be declared for it to work?

## What the property actually does `text-overflow` is easy to misread as "truncate the text". It is not a truncation property. Its job is purely cosmetic: when inline content is *already being clipped* by the element's overflow, `text-overflow` decides what appears at the clip edge. `clip` (the initial value) chops the glyph mid-stroke; `ellipsis` renders a `…` in place of the last glyphs that fit; a string value renders that string instead. Everything else — deciding that text overflows at all — is the job of other properties. That is why a lone `text-overflow: ellipsis` reliably does nothing. ## The three prerequisites ```css .truncate { overflow: hidden; /* something must clip */ white-space: nowrap; /* the line must not wrap */ text-overflow: ellipsis; max-inline-size: 20ch; /* the line must be able to exceed the box */ } ``` **1. The box must clip.** With the default `overflow: visible` nothing is clipped, so there is no clip edge to draw an ellipsis at. `hidden` is the usual choice; `clip` and the scrolling values also clip, though putting an ellipsis on a scrollable box is odd — the user can scroll to the text the ellipsis claims is missing. **2. The line must not wrap.** With normal white-space handling, a long sentence wraps into more lines and the box grows in the block direction instead of overflowing in the inline direction. There is nothing sticking past the inline edge, so nothing gets clipped. `white-space: nowrap` forces a single line. (`overflow-wrap` and `word-break` push the other way — they *encourage* breaking — so setting them alongside `nowrap` is a contradiction that trips people up.) **3. The box must be narrower than the line.** A block-level box in normal flow fills its containing block's inline size, so it already has a constraint. A box that shrinks to fit its content — a float, an absolutely positioned box, an `inline-block` with no width, a table cell in some configurations — grows to the text and never overflows. That is the case where everything *looks* right and the ellipsis still refuses to appear: the answer is a `width` or `max-width` (or `max-inline-size`). ## Where it applies `text-overflow` applies to block containers, so a bare `<span>` will not truncate; give it `display: inline-block` (or `block`) so it has a block container's inline layout to clip. It affects inline content only — it will not put an ellipsis after a clipped block-level child. Because the clipped text is still in the box, it stays selectable and copyable, and assistive technology still exposes the full string. That is usually the behaviour you want, and it is a real advantage over truncating strings in advance: the ellipsis is a rendering decision that adapts to the available width, not a lossy edit to the content. ## Multi-line truncation There is no `text-overflow` answer for "three lines then an ellipsis" — the property is single-line by nature. The technique everyone uses is the line-clamp trio, which is prefixed but implemented across engines: ```css .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } ``` All four declarations are required: the clamp only takes effect on a `-webkit-box` with vertical orientation, and without `overflow: hidden` nothing is clipped. Note that the box display type it depends on has its own quirks, so it is worth checking any layout you drop it into. ## Symptoms and fixes - Ellipsis missing, text wraps to several lines → `white-space: nowrap` is absent. - Ellipsis missing, text runs past the box → `overflow` is still `visible`. - Ellipsis missing, box just keeps getting wider → the box shrink-wraps its content; add a width or max-width. - Ellipsis appears but is chopped in half → you set `text-overflow: clip`, or you are looking at the `clip` fallback in a context where `ellipsis` does not apply. - Nothing works on an inline element → make it a block container first.