NBSP is the HTML entity that inserts a non-breaking space, preventing browsers from splitting the text at that point.
It looks like a regular space to readers but behaves like a glued character, preserving phrase integrity and layout stability across devices and viewports.
Core Syntax and Browser Behavior
The entity can be written as , , or —all resolve to the same Unicode character U+00A0.
Browsers render it using the same glyph metrics as a normal space, yet they refuse line breaks at its location.
This guarantees that “New York” or “100 %” stay intact even in narrow containers.
Entity Variants and Encoding
Use for clarity when hand-coding; rely on in minified templates to save bytes.
UTF-8 files can also store the literal NO-BREAK SPACE character, but entities remain safer against encoding mismatches.
Typographic Uses in Publishing
NBSP prevents typographic widows in headings like “Chapter 12”.
It keeps monetary values glued: $1 000 000 reads correctly on any screen width.
Style guides for French, Polish, and other languages mandate NBSP before punctuation marks such as “?”, “!” or “:”.
Preventing Orphaned Symbols
Without NBSP, “10 %” might become “10” at the end of one line and “%” at the start of the next.
A single fixes the issue without extra CSS.
Layout and Grid Alignment
Designers sometimes chain multiple entities to create quick, responsive indents inside buttons or menu items.
This avoids extra wrapper elements when prototyping.
Combine with CSS variables to make the spacing adapt to font metrics.
Micro-Grids Without Frameworks
Five consecutive characters equal roughly one en space in most fonts.
Use this for aligning labels and values in diagnostic logs or console output pages.
SEO Impact and Accessibility
Search engines treat NBSP exactly like a normal space; keyword proximity and tokenization remain unchanged.
Screen readers announce NBSP as a silent separator, so “New York” is still read as “New York”.
Overuse inside anchor text can dilute perceived relevance; limit to essential glue points.
Voice Navigation and Semantic Pauses
Voice assistants rely on punctuation and spaces for pauses; NBSP does not alter timing.
Keep phrases concise to avoid unintended run-on speech.
Unicode Cousins and Alternatives
U+202F NARROW NO-BREAK SPACE is thinner and ideal for French punctuation spacing.
U+2007 FIGURE SPACE matches the width of digits, aligning tables without extra CSS.
Choose the appropriate Unicode space for precision, but fall back to for universal support.
When Not to Use NBSP
Long sequences of for layout are brittle and break on font changes.
Use flexbox or CSS grid instead.
CSS Interactions and White-Space Rules
The CSS property white-space: nowrap extends the no-break concept to entire blocks.
Combine with white-space: pre-wrap to allow wrapping everywhere except the glued pair.
Override the default line-break opportunity with word-break: keep-all for CJK scripts.
Custom Properties for Spacing Tokens
Define :root { –nbsp-width: 0.25em; } and inject via ::before { content: ‘ 0a0’; width: var(–nbsp-width); }.
This centralizes spacing logic while preserving semantic HTML.
Email and Newsletter Considerations
Many email clients strip CSS but honor , making it a reliable spacer in table layouts.
Test in Outlook desktop; it collapses multiple spaces unless they are entities.
Use conditional comments for Outlook-specific padding when precise alignment is critical.
Dark Mode and High-Contrast Themes
NBSP does not affect color inversion; spacing remains consistent.
Verify that monetary values like $1 999 still align in both light and dark themes.
Internationalization and Locale Rules
Swedish uses NBSP in time expressions: 14 30.
Finnish inserts it in compound surnames: von Wright.
Automate replacements via ICU MessageFormat placeholders to respect each locale’s rules.
Machine Translation Pipelines
NBSP is preserved across most translation APIs, yet some engines convert it to a plain space.
Post-process strings with a regex replace to restore locale-specific spacing.
Security and Injection Risks
Never concatenate user input directly into HTML without escaping; a rogue entity can hide payloads.
Use template engines that auto-escape entities while allowing controlled insertion.
Audit logs for repeated sequences; they may signal obfuscation attempts.
Content Security Policy (CSP)
CSP does not restrict usage, but inline event handlers hidden after NBSP can slip past weak policies.
Enforce script-src ‘self’ to mitigate.
Testing and Debugging Techniques
In DevTools, enable “Show invisible characters” to highlight NBSP glyphs.
Use a bookmarklet to replace all with a visible marker during QA.
Automated visual regression tests catch layout shifts caused by missing NBSP.
Performance Metrics
Each adds six bytes; gzip reduces this to ~2 bytes, negligible unless used in thousands.
Profile large tables; replace excessive entities with padding-left rules.
Code Samples Across Frameworks
In React, dangerouslySetInnerHTML is unnecessary: just type inside JSX.
Vue templates auto-escape raw characters, so v-html=”‘u00A0′” is safe for dynamic injection.
Angular sanitizes content but keeps intact when bound via innerText.
Static Site Generators
Markdown processors convert to ; configure remark-gfm to disable if undesired.
Hugo shortcodes can output {{ .Inner | replaceRE ” ” ” ” }} for selective glue.
Edge Cases and Browser Quirks
Safari on iOS 14 once doubled NBSP width when system font was overridden; patched in 14.2.
Chrome on Windows misaligns inside monospace fonts if letter-spacing is negative.
Test across OS and browser matrix to confirm pixel-perfect alignment.
PDF Generation
Prince and WeasyPrint respect but may stretch justification spaces differently.
Disable automatic justification on paragraphs containing critical glued phrases.
Future Standards and Discussions
The CSS Text Module Level 4 proposes text-wrap: avoid to replace many NBSP use cases.
Until support stabilizes, remains the most compatible solution.
Join WICG discussions to shape upcoming spacing primitives.