Clipped text

The finding goes to an element meeting both conditions at once: its CSS hides overflow (overflow: hidden or clip) and its content is genuinely wider than what is visible. It is not a guess. The element really is concealing something.

The report distinguishes two cases, and they are worth separating when fixing too: with an ellipsis (the text ends in “…”, so at least it is visible that there is more) and with no indicator (the text simply stops mid-way with nothing to suggest it). The second is worse.

It is measured at three widths (390, 768, 1440 px) and severity rises to critical when the same problem appears at enough viewports of one page. The three measurements are merged into one report row.

What the check does not do: it does not judge whether the clipping is intentional (in multi-row listings it usually is), it does not distinguish clipping by two characters from clipping half a sentence, and it cannot see vertical clipping, only horizontal. The finding is page-level, with an annotated screenshot.

For visibility in AI answers there is no effect. And it is worth saying why here in particular, because it gets confused: the clipped text is still in the HTML. A model and a search engine read all of it; only CSS hides it in the browser. This finding is therefore exclusively about people.

And about people it is rather fundamental. The variant without an ellipsis is the dangerous one: a visitor has no way of knowing the text continues. A price that ends mid-number, a product name missing a crucial part, an address without the house number: that looks like complete information and is not.

Where it is intentional and the finding is a false alarm: single-line listings, article previews, catalogue tiles. There text is clipped deliberately and the full version is one click away. Ignore the finding when you know it is meant to be that way.

Where it is almost never intentional: buttons, headings, navigation items and values in forms. A clipped button leaves no way of telling what it does. And that is a defect regardless of design.

First decide whether the element is supposed to clip. That gives three routes:

1. It should not clip → remove overflow: hidden and let the text wrap. For long words and URLs, overflow-wrap: anywhere helps.
2. It should clip, but visibly → add an ellipsis. Without white-space: nowrap and text-overflow: ellipsis the ellipsis will not appear.
3. It should clip over several lines → -webkit-line-clamp shows the first three lines and suggests the rest.

/* One line with an ellipsis */
.name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Three lines, then an ellipsis */
.excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Two things not to forget with this fix:

• The clipped text must be available somewhere. When a tile cannot fit the whole name, it must be in title, in the detail view, or at least on hover. An ellipsis says “there is more”; somewhere that more must exist.
• Never clip buttons and links. Let the label wrap onto two lines instead; a button whose purpose is unclear is worse than a button one pixel taller.