# Non-breaking Spaces

**MUST** · **ID:** `content-non-breaking-spaces` · **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-non-breaking-spaces

> MUST: Use non-breaking spaces to glue terms: `10 MB`, `⌘ + K`, `Vercel SDK`

Use non-breaking spaces to keep units and terms together

Certain text elements should never wrap onto separate lines. Use   (non-breaking space) in HTML or \u00A0 in JavaScript to keep numbers with their units, keyboard shortcuts together, and brand names intact.

## Bad — do not do this

`content-non-breaking-spaces-bad`

```tsx
export function NonBreakingSpacesBad() {
  return (
    <div className="w-full max-w-xs">
      <div className="bg-card border border-border rounded-lg p-4 text-sm">
        <p className="mb-2">File size: 10 MB</p>
        <p className="mb-2">Shortcut: ⌘ + K</p>
        <p>Built with Vercel SDK</p>
      </div>
      <p className="text-xs text-error mt-4">
        Units and shortcuts can break across lines
      </p>
    </div>
  );
}
```

## Good — do this

`content-non-breaking-spaces-good`

```tsx
export function NonBreakingSpacesGood() {
  return (
    <div className="w-full max-w-xs">
      <div className="bg-card border border-border rounded-lg p-4 text-sm">
        <p className="mb-2">File size: 10&nbsp;MB</p>
        <p className="mb-2">Shortcut: ⌘&nbsp;+&nbsp;K</p>
        <p>Built with Vercel&nbsp;SDK</p>
      </div>
      <p className="text-xs text-success mt-4">
        Non-breaking spaces keep terms together
      </p>
    </div>
  );
}
```

## References

- [Non-breaking space](https://en.wikipedia.org/wiki/Non-breaking_space)