• Success Criterion 1.4.12
  • Conformance level AA

Fixed-Height Container Clipping Text at Wider Line Spacing

1.4.12 — Text Spacing

Scenario

Setting

A calendar app's event-creation form

What’s wrong

Fixed-height containers with overflow:hidden (style that clips overflowing content) clipping expanded text (cards, buttons, nav items).

Example 

.event-card { height: 60px; overflow: hidden; }

Why it matters

With increased line height applied, a two-line event title on the calendar gets cut off mid-word inside its fixed 60px card.

How to test

Apply the text-spacing override to a fixed-height card/button/nav item: if overflow:hidden clips the now-taller text, it fails.

How to fix

Swap fixed heights and overflow:hidden for min-height wherever text length can vary with user spacing settings.

.event-card { min-height: 60px; height: auto; overflow: visible; }

Outcome

A user reads a full two-line event title on their calendar instead of a title cut off mid-word.

Who is affected

Low-vision users with custom spacing settings lose part of event titles that a fixed-height card clips away.

Learn more

Related scenarios