# Handle Text Overflow Properly

**SHOULD** · **ID:** `content-ibelick-text-overflow` · **Category:** content
**Source:** [@Ibelick](https://www.ui-skills.com/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-ibelick-text-overflow

> 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

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.

## Bad — do not do this

`content-ibelick-text-overflow-bad`

```tsx
export function IbelickTextOverflowBad() {
  const items = [
    { title: 'Short title', desc: 'Brief description' },
    { title: 'This is an extremely long title that will break the layout when it wraps to multiple lines unexpectedly', desc: 'This description is also very long and will cause the card to expand way beyond what we expected when designing this component' },
    { title: 'Normal title', desc: 'Normal description' },
  ];

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-3 gap-2">
        {items.map((item, i) => (
          <div key={i} className="p-3 bg-muted rounded-lg">
            <p className="font-medium text-sm">{item.title}</p>
            <p className="text-xs text-muted-foreground mt-1">{item.desc}</p>
          </div>
        ))}
      </div>
      <p className="text-xs text-destructive">
        No overflow handling - long content breaks the grid
      </p>
    </div>
  );
}
```

## Good — do this

`content-ibelick-text-overflow-good`

```tsx
export function IbelickTextOverflowGood() {
  const items = [
    { title: 'Short title', desc: 'Brief description' },
    { title: 'This is an extremely long title that will break the layout when it wraps to multiple lines unexpectedly', desc: 'This description is also very long and will cause the card to expand way beyond what we expected when designing this component' },
    { title: 'Normal title', desc: 'Normal description' },
  ];

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-3 gap-2">
        {items.map((item, i) => (
          <div key={i} className="p-3 bg-muted rounded-lg">
            <p className="font-medium text-sm truncate">{item.title}</p>
            <p className="text-xs text-muted-foreground mt-1 line-clamp-2">{item.desc}</p>
          </div>
        ))}
      </div>
      <p className="text-xs text-success">
        truncate on title, line-clamp-2 on description - consistent card heights
      </p>
    </div>
  );
}
```

## References

- [baseline-ui (skill source)](https://github.com/ibelick/ui-skills/blob/main/skills/baseline-ui/SKILL.md)
- [Tailwind Line Clamp](https://tailwindcss.com/docs/line-clamp)