Pattern — Content overflow

Status: v0.1.0 — Draft. Promoted from the KDS × gov.br Design System gap analysis (tools/design-gen/docs/govbr-ds-gap-analysis.md, GVB-16). Source: gov.br Padrão Digital contentoverflow pattern.

R1 — Choose the strategy by content type

Pick one strategy per surface, by what the content is:

• Truncate (R2) — short single-line values whose full form is occasionally needed: names, labels, paths, table cells.
• Show more / expand (R3) — long-form prose the user may want to read in full inline: descriptions, comments, log lines.
• Scroll (R4) — inherently large content in a bounded region: code blocks, wide tables, long lists.
• Wrap (R5) — the default; only override it deliberately.

Never silently clip content so that meaning is lost with no affordance to recover it.

R2 — Truncation (ellipsis + recovery)

• Truncate with a trailing ellipsis (…), and always pair it with a way to see the full value: a tooltip on hover/focus, or expand on click. The full value must be reachable by keyboard, not hover-only.
• Truncate at the end by default; truncate in the middle when the tail is identifying (file paths, ids: …/reports/2026-Q1.pdf).
• The full text remains in the accessible name / DOM so screen readers get the whole value even when it is visually clipped.

R3 — Show more / expand

• Collapse long prose to a fixed number of lines with a Show more toggle that expands in place and flips to Show less. The control is a real button, labeled with its action and state.
• Preserve scroll position on collapse (don't jump the page). Expanded state is not persisted unless the surface has a reason to.

R4 — Bounded scroll

• Give inherently large content a bounded, scrollable region with a visible scroll affordance; never let one region force the whole page to scroll sideways.
• Wide tables scroll horizontally within their own container (specs/patterns/admin-data-table.kmd), keeping the page body free of horizontal scroll. Sticky headers/first-column where it aids orientation.
• Scrollable regions are keyboard-focusable and expose their overflow to assistive tech.

R5 — Wrap rules

• Wrap is the default for natural-language text — do not truncate paragraphs. Truncation is for constrained single-line slots only.
• Break long unbroken tokens (URLs, hashes) with overflow-wrap so they never force horizontal page scroll.
• Numeric/tabular columns may right-align and use tabular figures; they wrap or truncate per R1, not by accident.

R6 — Menus & overflow chrome

• When actions exceed the available bar width, collapse the overflow into a "More" menu (kebab/overflow) rather than clipping or wrapping the bar. The most important actions stay visible; the rest move into the menu in a stable order.

R7 — Accessibility & i18n

• Every truncated value exposes its full text to assistive tech (R2); tooltips are keyboard-reachable and dismissable.
• Show-more/less and overflow menus are real, labeled, state-announcing controls; nothing is reachable by hover alone.
• Rules hold across translations — some languages are ~30% longer, so layouts must tolerate wrap/overflow without clipping. All chrome ("Show more", "More", tooltips) is translatable per specs/i18n/contract.kmd.

Não-escopo

• Pagination of large data sets (a data-table concern — specs/patterns/admin-data-table.kmd).
• Responsive breakpoint layout (a layout/theme concern).
• Lazy-loading / virtualization (a performance technique, not the overflow presentation contract).