Enlarged text must not lose or clip content
Aliases: clipped text · overflow hidden · resize truncation
What it is
After text is enlarged to a usual checkpoint (for example 200%), words that were readable must not vanish. Wrapping onto the next line still counts as present. Clipping under overflow: hidden, new ellipses, or half a glyph inside a button is loss. The test is whether the information is still there, not whether the layout still matches the mock. Wrapping itself is not a failure.
Why it happens
Layout budgets line count and width at 100% type. Once type grows, the same box cannot hold the string. If the box crops instead of growing or wrapping, the extra glyphs leave both the visible and, often, the usable range — they may remain in the DOM while gone from the screen, and assistive technology may not restore a visually cropped tail.
Designers see full labels at default size. Truncation is a state that appears only after enlarge, so a 100% screenshot walkthrough misses it. Single-line labels, badges, table cells, and nav items are first to switch to ellipsis when width is locked. Ellipsis without a second path to the full string (an expand control; title that readers ignore; hover that keyboards never get) is loss. Type baked into a bitmap will not grow with page text; that is a different enlarge path. This leaf is page text eaten by a container.
Studying it
Enlarge text only to 200% (or the product’s stated checkpoint). Against the 100% page, log each string as complete, wrapped-but-complete, ellipsized, clipped, or unreadable on a control. Re-walk clipped controls with keyboard and a reader and check whether the name remains.
Independent variables: enlargement factor, overflow / white-space / line-clamp on the container, presence of an expand path. Dependent variables: count of lost or clipped nodes, whether meaning is recoverable, whether the task can still be finished.
A shrunken full-page screenshot is not a substitute. Automation rarely knows whether the string behind an ellipsis is still required; ask the task whether work can continue without that sentence.
Where it stops holding
Intentional previews (a list summary plus “more”) are not loss if the full content still opens after enlarge. Captchas, fixed-pixel canvases, and map labels are medium-bound and need a text equivalent. When a data table must scroll horizontally, cells should still show their full glyphs — do not crop the word and then scroll. Reflow into a single column at higher magnification is a separate requirement. At this checkpoint, first keep the words that the current layout already had.
Applying it
- Let text boxes wrap and grow. Do not bet that hidden + nowrap will fit labels, buttons, or critical copy at 100%.
- If truncation is required, provide a reachable full string (expand, detail page). Do not rely on hover or
titlealone. - Let chips and filters grow with content, or wrap to two lines. Do not lock them to a four-character width.
- Verify: set text to 200%, tick every heading, button, status word, and cell against the 100% inventory. An ellipsis or half glyph with no way to open the rest is a defect. Listen to clipped controls with a reader and confirm they are not nameless “button.”