css/no-fixed-height-text

Why

A box of height: 72px; overflow: hidden fits the text only at the designer's font size, line height and language. When someone enlarges text, raises line or letter spacing, or the copy is translated into a longer language, the end of the text is cut off without a trace.

Fix

Use min-height (or min-block-size) and padding, and let the content decide the height. To shorten long text on purpose, use line-clamp with a way to read the rest. Fixed sizes are fine for media and for boxes whose width is fixed too (avatars, icon buttons). Check by applying the WCAG text-spacing values (line height 1.5, letter spacing 0.12em, word spacing 0.16em, paragraph spacing 2em).

Examples

/* bad */
.card__excerpt { height: 72px; overflow: hidden; }
/* good */
.card__excerpt { min-height: 4.5rem; }

Sources

• WCAG 2.2, Understanding SC 1.4.12 Text Spacing
• WCAG 2.2, Failure F104 (clipped or overlapping content when text spacing is adjusted)
• MDN, min-height

Read it in the terminal

npx github:dawidolko/frontend-skills explain css/no-fixed-height-text