Fig. 35 / Truncation
Web UI Patterns
Truncation
EXPLAINED SIMPLY:The three dots standing in for missing words.
Truncation is when an interface cuts off text that does not fit and puts three dots where the missing words used to be.
It keeps a row neat, but neatness can hide the only part that matters. "Quarterly report FINAL" and "Quarterly report DRAFT" both become "Quarterly rep..." in a narrow card. If the distinguishing word disappears, the shortened label has failed its job.
Sometimes truncation is harmless. An inbox can shorten a long subject when the sender and opening words give enough context, especially if the full text appears after a tap or hover. It is dangerous on buttons, prices, settings, and anything a person must tell apart before acting.
You'll hear truncated, ellipsis, three dots, cut off, text overflow, clipped text, and line clamp. Text scaling exposes weak truncation quickly because larger type reaches the edge sooner. Wrapping to a second line is often the simplest fix.
Treat the dots as removed information, not a decorative ending. Ask what the reader loses before choosing them. A tidy row is not worth making two different choices look identical.