The non-breaking space (NBSP, U+00A0) is probably the most well-known invisible character on the web. Every web developer has typed   at some point. Every writer has accidentally pasted one from a Word document without knowing it.

It looks identical to a regular space. It takes up the same width as a regular space. But it has one critical difference: it prevents the browser or application from breaking the line at that point. The words on either side of a non-breaking space will always stay together on the same line.

This simple property makes NBSP incredibly useful for typography, but it is also the source of one of the most common invisible bugs in web development: two strings that look identical but fail to match because one contains non-breaking spaces where the other has regular spaces.

Common Uses

• Preventing line breaks between words that belong together. Numbers and units (100 km), titles and names (Dr. Smith), and page references (page 7) should not be split across lines. NBSP keeps them together.
• HTML   for extra whitespace. Browsers collapse multiple regular spaces into one, but they preserve non-breaking spaces. This makes   the classic way to add extra spacing in HTML.
• Blank usernames on social platforms. Some platforms accept NBSP as a username character, creating a profile name that appears blank.
• French typography. French typographic rules require a non-breaking space before semicolons, colons, question marks, exclamation marks, and some quotation marks to prevent these punctuation marks from appearing at the start of a line.
• Preventing table cell collapse. In HTML, empty table cells may collapse to zero height. Adding   keeps them at their proper height.

How to Type

The macOS Trap

On macOS, pressing Option+Space inserts a non-breaking space instead of a regular space. This catches many developers off guard. You are typing code, you press Option for a special character, and then hit Space. Instead of a regular space, you get NBSP. Your code looks correct but fails in mysterious ways.

If you are a developer on macOS, this is worth knowing about. Many invisible bugs in code written on Mac are caused by accidental Option+Space keystrokes.

Why NBSP Causes Bugs

Non-breaking space (U+00A0) and regular space (U+0020) are two completely different Unicode characters. They just happen to look identical.

This means:

• String comparison fails. "hello world" === "hello\u00A0world" is false, even though both look like "hello world" on screen.
• Search and find/replace miss it. Searching for a space character will not find non-breaking spaces.
• JSON parsing can break. If NBSP appears in a JSON key or where regular whitespace is expected, parsers may throw errors.
• CSS selectors can fail. A class name with NBSP instead of a regular space becomes a single class name rather than two separate classes.
• Regular expressions behave differently. \s matches NBSP in some regex flavors but not others, creating inconsistent behavior across languages.
• Trimming may not work. Some language implementations of trim() strip regular spaces but leave NBSP intact.

How to Detect NBSP in Code

In JavaScript:

// Check if a string contains NBSPtext.includes('\u00A0')
// Replace all NBSP with regular spacestext.replace(/\u00A0/g, ' ')
// Or use the broader approach - replace all Unicode spacestext.replace(/[\u00A0\u2000-\u200A\u202F\u205F\u3000]/g, ' ')

Where NBSP Sneaks Into Your Text

NBSP rarely gets into your text on purpose. Here are the most common sources:

1. Microsoft Word. Word automatically inserts NBSP in various contexts, especially before colons and in numbered lists.
2. Google Docs. Similar to Word, Google Docs inserts NBSP during formatting operations.
3. Copy-paste from web pages. HTML that uses   for spacing will paste as actual NBSP characters.
4. macOS Option+Space. The most common accidental source for developers.
5. CMS rich text editors. WordPress, Contentful, and other CMS platforms often insert NBSP when you press Enter or format text.
6. PDF text extraction. Text copied from PDFs frequently contains NBSP instead of regular spaces.

NBSP vs Other Space Characters

For Web Developers

If you need extra spacing in HTML, consider whether   is really the right tool:

• For layout spacing, use CSS margin or padding instead of  .
• For preventing line breaks between words,   works, but you can also use CSS white-space: nowrap on a wrapping element.
• For empty table cells, use CSS empty-cells: show instead of inserting  .
• For justified text gaps, use   only when you specifically need a non-breaking space. For visual spacing, CSS is almost always better.

Using   for visual layout is considered a code smell in modern web development. Reserve it for its semantic purpose: preventing line breaks between words that should stay together.

How NBSP Relates to Other Invisible Characters

NBSP is the most commonly encountered invisible character, but it is just one of many space-like characters in Unicode. If you are dealing with invisible character issues, you may also want to learn about:

• Narrow No-Break Space (U+202F) - A thinner non-breaking space, correct for French typography
• Zero-Width Space (U+200B) - Zero-width, allows line breaks (opposite of NBSP in behavior)
• Word Joiner (U+2060) - Zero-width, prevents line breaks (like NBSP but with no visible width)
• Em Space (U+2003) - A wider space, the width of the letter M

Each serves a different typographic purpose, and mixing them up causes different kinds of bugs.