# Use Ellipsis Character

**MUST** · **ID:** `content-ellipsis-character` · **Category:** content
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-ellipsis-character

> MUST: Use the ellipsis character `…` (not ``)

Use … instead of three periods

The proper ellipsis character (…) is a single character with correct spacing. Three periods (...) have wider spacing and look unprofessional. Use the real ellipsis character (Unicode U+2026) in all text.

## Bad — do not do this

`content-ellipsis-character-bad`

```tsx
export function EllipsisCharacterBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <div className="space-y-3">
          <button className="w-full text-left px-4 py-2 hover:bg-muted rounded-lg flex justify-between items-center">
            <span>Rename...</span>
          </button>
          <button className="w-full text-left px-4 py-2 hover:bg-muted rounded-lg flex justify-between items-center">
            <span>Save as...</span>
          </button>
          <div className="px-4 py-2 text-muted-foreground">
            Loading...
          </div>
        </div>
        <div className="mt-3 bg-error/10 border border-error/20 rounded-lg p-3">
          <p className="text-xs text-error font-mono">
            Using three periods: ... (U+002E × 3)
          </p>
          <p className="text-xs text-error/80 mt-1">
            Wider spacing, looks unprofessional
          </p>
        </div>
      </div>
      <p className="text-xs text-error mt-4">
        Three periods (...) instead of ellipsis character
      </p>
    </div>
  );
}
```

## Good — do this

`content-ellipsis-character-good`

```tsx
export function EllipsisCharacterGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <div className="space-y-3">
          <button className="w-full text-left px-4 py-2 hover:bg-muted rounded-lg flex justify-between items-center">
            <span>Rename…</span>
          </button>
          <button className="w-full text-left px-4 py-2 hover:bg-muted rounded-lg flex justify-between items-center">
            <span>Save as…</span>
          </button>
          <div className="px-4 py-2 text-muted-foreground">
            Loading…
          </div>
        </div>
        <div className="mt-3 bg-success/10 border border-success/20 rounded-lg p-3">
          <p className="text-xs text-success font-mono">
            Using ellipsis: … (U+2026)
          </p>
          <p className="text-xs text-success/80 mt-1">
            Proper spacing, professional appearance
          </p>
        </div>
      </div>
      <p className="text-xs text-success mt-4">
        Proper ellipsis character (…) for professional typography
      </p>
    </div>
  );
}
```

## References

- [Ellipsis](https://en.wikipedia.org/wiki/Ellipsis)