Overflow policy (truncate, wrap, scroll) has to be named

What it is

A title that does not fit can ellipsis, can wrap and grow the card, or can scroll inside the cell. The three outcomes diverge: truncation throws information away, wrapping wrecks row height and virtualisation, inner scroll mints a nested scroller people miss. The engine default (often overflow visible, or wrap) is not a policy. Every slot needs a written branch for overflow, and a way to see what was hidden.

Undefined overflow blowing the layout is the next leaf’s crash. This one demands a name first.

Why it happens

Truncation discards; it needs a reveal — hover, expand, a detail page. A primary key (a person’s name, an order id) truncated past recognition fails comparison and recognition. Wrapping keeps the information and spends height; uneven heights then disturb virtualisation, masonry, sticky headers. Inner scroll keeps the outer box and costs a second scroll container, hard to discover on touch and ready to fight the page scroll.

Policy follows the task: a table’s Amount may truncate (full value on the detail); Name often wraps; a code block would rather scroll horizontally than wrap into an unscannable rag. Three slots on one card may use three policies. Mixing is fine; mixing unspoken is not.

Where it stops holding

Decorative texture and background watermarks may crop without a reveal. Legal copy and error detail must not truncate. An input’s overflow is another system (scrolling the caret); do not share an ellipsis with a display slot. Print has no hover; truncation has to become wrap or an explicit “continued.”

Applying it

• Write one of three per text and image slot: wrap | truncate + how revealed | scroll inside the slot. Primary keys default to not truncating to death.
• Truncation must actually yield the rest of the string (not a title tooltip that never fires on touch).
• How to check: overflow the slot. Behaviour should match the written policy: truncate shows an ellipsis and a reveal path; wrap grows the outer box without covering a neighbour; scroll shows a discoverable cue (fade or bar) and sliding that slot does not drag the page. A blank policy, or “we’ll see,” gets written before you test again.

Related

• Same group: F2.16.1 Layouts have to be tested with extreme lengths and empties, not typical copy · F2.16.3 Undefined overflow blows the layout or covers neighbours · F2.16.4 Real length distributions run more extreme than mock copy
• Nearby: F4.10 Truncation and ellipsis · E4.04 Sticky headers and horizontal scroll · F2.09 Masonry layout
• Search terms: text-overflow · line clamp · overflow auto · ellipsis