Example 1 — Title and Surname
html
<p>Mr. Smith</p>
<p>Dr. Jane Doe</p>How It Works
The period after “Mr.” often sits at the end of a line when using a normal space. keeps the honorific glued to the name.
HTML Non-Breaking Space
Overview
Introduction
The non-breaking space is a special type of space character used in HTML to prevent automatic line breaks. It helps you keep related words, numbers, or symbols together on the same line so your text stays readable and professional-looking.
Unlike a regular space, which the browser may collapse or use as a wrap point, forces the browser to treat that spot as “do not break here.” This tutorial explains what it is, when to use it, and how to write it in HTML — with plain Try It demos and no extra CSS.
What You’ll Learn
What it is
U+00A0 explained.
When to use
Names, phones.
Named entity.
Numeric forms
and .
Pitfalls
What to avoid.
Examples
Real markup.
Fundamentals
What Is a Non-Breaking Space?
A non-breaking space is a space character that prevents an automatic line break at its position. In Unicode it is called NO-BREAK SPACE and has the code point U+00A0.
It looks identical to a normal space on screen, but the browser will not wrap text across it. That makes it useful when splitting certain words or numbers onto two lines would look wrong or confuse readers.
Beginner Tip
Think of as glue between two tokens. Mr. Smith keeps “Mr.” and “Smith” on the same line, even in a narrow column.
Practical
Usage of Non-Breaking Space
Non-breaking spaces are often used in the following scenarios:
- Titles and names — keep “Mr.” and “Smith”, or “Dr.” and a surname, together.
- Numbers and units — prevent
10andkgfrom splitting (10 kg). - Phone numbers and codes — group digits:
123 456 7890. - Dates and prices — keep parts together:
Jan 5, 2026or$19 USD. - Short phrases — avoid orphaned words in notices or labels when a regular space would wrap awkwardly.
Regular spaces in HTML can collapse (multiple spaces become one). A non-breaking space does not collapse, which is another reason authors reach for in specific spots.
Syntax
HTML Entity for Non-Breaking Space
In HTML, a non-breaking space is represented by the entity . The name stands for “non-breaking space” and you can use it anywhere you need a space that will not collapse or break into a new line.
html
<p>Mr. Smith</p>In this example, “Mr.” and “Smith” will always appear on the same line, with a space between them that does not break.
Other ways to write the same character
| Form | Example | Notes |
|---|---|---|
| Named entity | | Most common in HTML tutorials |
| Decimal |   | Code point 160 in base 10 |
| Hexadecimal |   or   | Code point U+00A0 in base 16 |
| Literal character | Copy U+00A0 from a charset table | Works if your file is UTF-8 |
All of these produce the same character. For a full Unicode reference (CSS escapes, related spaces), see HTML Entity for Non-Breaking Space (U+00A0).
Watch Out
Common Pitfalls
- Overuse — sprinkling
everywhere leads to rigid layouts and horizontal overflow on small screens. Use it only where wrapping would genuinely hurt readability. - Layout spacing — do not chain multiple
characters to indent or align content. Use CSSmargin,padding, ortext-aligninstead. - Accessibility — screen readers generally handle
fine, but hiding meaning inside non-breaking glue (e.g. breaking up a word letter-by-letter) can confuse assistive tech. Keep real words intact. - Browser compatibility —
is universally supported, but always preview narrow viewports to ensure your text still fits without unwanted scrolling. - Confusion with regular spaces — remember that only U+00A0 prevents breaks. A normal space (U+0020) will still allow wrapping.
Cheat Sheet
⚡ Quick Reference
Entity
Named form
Unicode
U+00A0NO-BREAK SPACE
Decimal
 Numeric ref
Effect
no wrapAt this spot
Hands-On
Examples Gallery
Five short examples from a single line to a full page. Try It Yourself demos use plain HTML with no CSS so you can focus on .
Example 2 — Phone Number
html
<p>Phone: 123 456 7890</p>How It Works
Each digit group stays together; the line breaks only between groups if the container is very narrow.
Example 3 — Number and Unit
html
<p>Weight: 10 kg</p>
<p>Temperature: 25 °C</p>How It Works
Science and commerce copy often pairs a value with a unit. A non-breaking space avoids a lonely number on one line and the unit on the next.
Example 4 — Three Entity Forms (Same Result)
html
<p>Named: Hello World</p>
<p>Decimal: Hello World</p>
<p>Hex: Hello World</p>How It Works
Pick the form that matches your team’s style. Beginners usually start with because it is easy to remember.
Example 5 — Example Usage (Full Page)
A complete page combining phone spacing and an important notice — from the classic tutorial pattern, expanded with a date and price:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Non-Breaking Space Example</title>
</head>
<body>
<h1>HTML Non-Breaking Space Example</h1>
<p>Here is an example of using non-breaking spaces:</p>
<p>Phone Number: 123 456 7890</p>
<p>Important: Please read the instructions carefully.</p>
<p>Date: Jan 5, 2026</p>
<p>Price: $19 USD</p>
</body>
</html>How It Works
In this example, the phone number displays with spaces that do not break to a new line mid-digit-group. The “Important” sentence keeps its rhythm without awkward single-word wraps.
Summary
Example Usage
When you write Important: Please read the instructions carefully., each marks a spot where the browser must not wrap. The phrase reads naturally but resists breaking in odd places on narrow screens.
Open Try It example 3 and narrow the preview panel to compare behavior with regular spaces.
Applications
🚀 Common Use Cases
- Honorifics — Mr., Mrs., Dr., Prof. before a name.
- Contact info — phone, fax, and postal codes with grouped digits.
- Measurements — values with units (km, px, %, currency).
- Brand names — short multi-word names that should not split.
- Navigation labels — keep icon + short label together in tight menus.
- Legal copy — section numbers glued to titles (Section 3.2).
🧠 How Works (Step by Step)
1
You write the entity
Type (or a numeric equivalent) in your HTML source.
2
Parser decodes it
The browser replaces the token with Unicode character U+00A0.
3
Layout engine respects it
Line breaking is forbidden at that position; whitespace does not collapse.
4
User sees normal space
Visually it looks like a space, but surrounding tokens stay together when possible.
Compatibility
Universal Browser Support
and U+00A0 are supported in every browser that renders HTML. There is nothing to polyfill or detect.
Baseline · Since HTML
Non-breaking space support
and U+00A0 are supported in every browser that renders HTML. There is nothing to polyfill or detect.
100% Core tag support
Google Chrome All versions · Desktop & Mobile
Full supportMozilla Firefox All versions · Desktop & Mobile
Full supportApple Safari All versions · macOS & iOS
Full supportMicrosoft Edge All versions · Chromium & Legacy
Full supportInternet Explorer IE 6+ · Legacy environments
Full supportOpera All modern versions
Full support entity Universal
Bottom line: Use confidently for typography; prefer CSS for layout spacing when possible.
Guidelines
Best Practices
- Use sparingly — one or two well-placed
characters beat dozens sprinkled through a paragraph. - Prefer CSS for layout — margins, flexbox, and
white-spacehandle spacing more predictably than entity chains. - Test narrow widths — non-breaking glue can cause overflow; check mobile viewports.
- Pair with semantic HTML —
is a typography tool, not a substitute for proper headings and lists. - Know the alternatives — CSS
white-space: nowrapon a<span>can keep a whole phrase together without entity soup.
Wrap-Up
Conclusion
The non-breaking space is a simple yet powerful tool in HTML for controlling the spacing and formatting of text. By understanding how and when to use , you can enhance the readability and presentation of your web content without reaching for heavy layout hacks.
For the full character reference (hex, decimal, CSS), continue to HTML Entity for Non-Breaking Space (U+00A0). Next up: learn how links work with the HTML <a> tag.
🏆 Key Takeaways
Remember these points when you use non-breaking spaces in your projects.
01
U+00A0
Same character everywhere.
Unicode 02
No wrap
Line break blocked.
Behavior 03
Easiest to type.
Syntax 04
Sparingly
Not for layout.
Caution❓ Frequently Asked Questions
is the named character reference for a non-breaking space (Unicode U+00A0). The browser renders it as a visible space that will not allow a line break at that position.
Use it to keep related words or tokens on the same line: titles with names (Mr. Smith), numbers with units (10 kg), phone numbers, dates, or short phrases that would look awkward if split across lines.
A regular space (U+0020) can collapse in HTML and allows line wrapping. A non-breaking space (U+00A0) does not collapse and prevents wrapping at that spot.
Yes. All three decode to the same character U+00A0. is the named form;   is decimal;   is hexadecimal. Use whichever you prefer — is most common in tutorials.
Avoid using multiple characters to push content around. That is fragile and hurts accessibility. Use CSS margin, padding, or flexbox for layout instead.
Yes. Non-breaking spaces have been part of HTML since the earliest versions and work in every modern and legacy browser.
Did you know?
HTML also has a non-breaking hyphen (U+2011, ‑) that keeps hyphenated words like “self-driving” on one line. Spaces and hyphens solve different wrapping problems — see Non-Breaking Hyphen for details.
Practice in the editor
Type Mr. Smith, resize the preview, and see how non-breaking spaces keep text together — plain HTML, no CSS required.
About the author
5 people found this page helpful