text-overflow and ellipsis in CSS: the three properties you actually need together

An article title too long for the card it sits in, a file name overflowing a narrow menu: the usual fix is to cut the text short and end it with three little dots, a look so familiar that many assume a single CSS property must be enough to get it. It is not.

text-overflow never works alone. It needs two accomplices, white-space and overflow, without which it produces absolutely no visible effect, which explains a good share of the questions asked about it.

Definition

text-overflow determines how text overflowing its box is visually signaled once it gets cut. Its most used value, ellipsis, replaces the cut-off text with three dots.

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

The three properties required together

Each of these three properties plays a specific role, and removing any one of them cancels the whole effect, without raising the slightest error in the console.

Without white-space: nowrap;, the text simply wraps to the next line instead of overflowing, so there is nothing left to cut. Without overflow: hidden;, nothing gets hidden, so text-overflow has no overflow to act on. The box also needs a defined width, or a width constrained by its container: an element whose width freely adjusts to its content will never overflow, so truncation never triggers.

A concrete example inside a card

Here is a typical case: a blog card title that must never span more than one line, no matter how long the actual article title happens to be.

.card {
  width: 280px;
}

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

With this setup, a short title displays normally, and a title too long to fit inside the card's 280 pixels gets automatically cut and ends with an ellipsis, without ever breaking the layout.

The trap of forgetting one of the three

This is the most common mistake on the topic: copying text-overflow: ellipsis; from an example found online, without the two other properties that came with it. The result is text that simply overflows its box, with no ellipsis at all, and not the slightest error message hinting at what is missing.

Truncating several lines with -webkit-line-clamp

The trio above only works on a single line. To cut text after several lines, for example an article summary limited to three lines, a different technique takes over, -webkit-line-clamp, which despite its historical prefix is now widely supported across modern browsers.

.summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

This setup requires a special display value, -webkit-box, different from the usual block or flex, which makes it a technique of its own rather than a simple extension of the trio above. white-space and text-overflow play no role here: it is -webkit-line-clamp that sets how many lines are allowed before the cut.

Frequently asked questions

It is almost always because white-space: nowrap;, overflow: hidden;, or a defined width on the box is missing. All three conditions must be met at once, none of them is optional to get the effect.

The standard text-overflow property is limited to ellipsis or clip, which cuts the text without adding anything. Some browsers accept a custom string in quotes, but that behavior is not guaranteed everywhere, so it sees little use in practice.

Its support has become widespread in recent years, even outside browsers historically built on WebKit, despite its prefix. It is still worth checking its behavior on the browsers a given project actually targets before relying on it for a critical piece of the interface.

No, the full text stays present in the HTML and remains readable by a screen reader, only its visual presentation gets shortened. That is a clear advantage over a solution that would actually cut the text on the server before sending it to the page.