Skip to main content
UI Guides

Search rules

Search all UI Guides rules by name, category, or source

content@Ibelick

Handle Text Overflow Properly

SHOULD

SHOULD: Use truncate or line-clamp-* for dense UI to prevent layout breaking. Add title attribute for full text on hover. Long text should never break layout.

Use truncate or line-clamp for predictable text overflow in dense layouts

Bad

Good

Why it matters

From the Typography constraints in ibelick's baseline-ui skill — a SHOULD, not a MUST. User-generated content can be any length; without overflow handling, cards expand unexpectedly and grids break. Use truncate for single lines, line-clamp for a multi-line cap.

References

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.