Truncation

The mark is the point. Text that simply runs out of room and stops has been clipped, and a reader has no way to tell a clipped title from a short one. An ellipsis says a decision was made and there is more where that came from, which is what turns a rendering accident into a piece of interface.

CSS offers two mechanisms and they behave differently. text-overflow: ellipsis works on a single line and needs the line kept on one line (white-space: nowrap) plus overflow: hidden to have anything to overflow. Multi-line truncation goes through line-clamp, which cuts after a fixed number of lines. Both are visual only. The full string stays in the DOM, so it is what find-in-page matches, what a screen reader announces, and what gets copied, which is usually the behaviour you want and occasionally a surprise.

Where the cut lands matters more than people expect. Trailing truncation is the default and it is the wrong end for filenames, URLs, and version numbers, where everything that distinguishes one item from its neighbours sits at the tail: report-2024-final-v3... and report-2024-final-v7... truncate to the same string. Middle truncation, keeping both ends and cutting the centre, is the fix, and it has to be done in script since CSS has no property for it. Truncating a column of values the reader is there to compare is the worst case of all.

Reaching for title to restore the missing text is the common reflex and a weak one: native tooltips have an uncontrollable delay, never appear on touch, and are read out in addition to the element’s own text rather than instead of it. A real tooltip on the truncated element, or a detail view that shows the whole string, is the honest recovery. Better still is designing for the length the content actually has, since truncation is a last resort dressed up as a layout technique.