HTML   (Non-Breaking Space) - Complete Guide

The non-breaking space ( ) is one of the most commonly used HTML entities. This guide explains what it is, when to use it, and how to avoid common mistakes.

Table of Contents

1. What is  ?
2. When to Use Non-Breaking Spaces
3. How to Insert  
4.   vs Regular Space
5. Best Practices and Alternatives
6. Common Mistakes to Avoid

What is  ?

  stands for "non-breaking space" and is an HTML entity that creates a space that prevents automatic line breaks.

Key Characteristics:

• Creates a space character
• Prevents line wrapping at that position
• Takes up the same width as a regular space
• Can be used multiple times for wider spacing

HTML Entity Details:

View   entity details

Why Non-Breaking Spaces Exist

Regular spaces in HTML can be collapsed or used as line-break points. Non-breaking spaces solve two problems:

Problem 1: Space Collapsing

HTML collapses multiple spaces into one:

<!-- ❌ Multiple regular spaces collapse -->
<p>This    has    many    spaces</p>
<!-- Output: "This has many spaces" (only single spaces) -->

<!-- ✅ Non-breaking spaces preserve spacing -->
<p>This&nbsp;&nbsp;&nbsp;&nbsp;has&nbsp;&nbsp;&nbsp;&nbsp;many&nbsp;&nbsp;&nbsp;&nbsp;spaces</p>
<!-- Output: "This    has    many    spaces" (preserves spacing) -->

Problem 2: Unwanted Line Breaks

Browsers can break lines at regular spaces:

<!-- ❌ Regular space - can break awkwardly -->
<p>The price is 10 000 USD</p>
<!-- Could wrap to: "The price is 10
000 USD" -->

<!-- ✅ Non-breaking space - stays together -->
<p>The price is 10&nbsp;000&nbsp;USD</p>
<!-- Always: "The price is 10 000 USD" -->

When to Use Non-Breaking Spaces

1. Keeping Numbers Together

Prevent numbers and their units from separating:

<!-- Measurements -->
<p>The distance is 50&nbsp;km</p>
<p>The temperature is 20&nbsp;°C</p>
<p>The weight is 150&nbsp;lbs</p>
<p>The height is 6&nbsp;feet 2&nbsp;inches</p>

<!-- Currencies -->
<p>Price: $100&nbsp;USD</p>
<p>Cost: €50&nbsp;EUR</p>
<p>Budget: £1,000&nbsp;GBP</p>

<!-- Large numbers (European format) -->
<p>Population: 1&nbsp;234&nbsp;567</p>
<p>Revenue: $100&nbsp;000&nbsp;000</p>

2. Keeping Names Together

Prevent names from splitting across lines:

<!-- Personal names -->
<p>Dr.&nbsp;Jane&nbsp;Smith</p>
<p>Mr.&nbsp;John&nbsp;Doe</p>
<p>Prof.&nbsp;Mary&nbsp;Johnson</p>

<!-- Company names -->
<p>Apple&nbsp;Inc.</p>
<p>Google&nbsp;LLC</p>
<p>Microsoft&nbsp;Corporation</p>

<!-- Titles and chapters -->
<p>Chapter&nbsp;5</p>
<p>Volume&nbsp;II</p>
<p>Section&nbsp;3.4</p>

3. Dates and Times

Keep date components together:

<p>January&nbsp;15,&nbsp;2025</p>
<p>3&nbsp;PM</p>
<p>10:30&nbsp;AM</p>
<p>Q4&nbsp;2024</p>
<p>Monday,&nbsp;Jan&nbsp;15</p>

4. Abbreviations and Acronyms

Keep abbreviations with related text:

<p>i.e.&nbsp;for example</p>
<p>e.g.&nbsp;such as</p>
<p>etc.&nbsp;and so on</p>
<p>U.S.&nbsp;government</p>
<p>vs.&nbsp;(versus)</p>

5. Mathematical Expressions

Keep operators with operands:

<p>x&nbsp;+&nbsp;y&nbsp;=&nbsp;10</p>
<p>5&nbsp;×&nbsp;3&nbsp;=&nbsp;15</p>
<p>a&nbsp;&lt;&nbsp;b</p>
<p>10&nbsp;/&nbsp;2&nbsp;=&nbsp;5</p>

6. Initials and Academic Degrees

<p>J.&nbsp;K.&nbsp;Rowling</p>
<p>Ph.&nbsp;D.</p>
<p>M.&nbsp;A.&nbsp;in Psychology</p>
<p>B.&nbsp;Sc.</p>

How to Insert  

Method 1: Entity Name (Most Common)

<p>Hello&nbsp;World</p>

Method 2: Entity Number

<p>Hello&#160;World</p>

Method 3: Hexadecimal

<p>Hello&#xA0;World</p>

Method 4: Direct Unicode (Not Recommended)

<p>Hello World</p>
<!-- Contains actual non-breaking space character - invisible in code -->

Multiple Non-Breaking Spaces

<!-- Two spaces -->
<p>Hello&nbsp;&nbsp;World</p>

<!-- Four spaces (em space equivalent) -->
<p>Hello&nbsp;&nbsp;&nbsp;&nbsp;World</p>

<!-- Creating aligned columns -->
<p>Name:&nbsp;&nbsp;&nbsp;&nbsp;John</p>
<p>Age:&nbsp;&nbsp;&nbsp;&nbsp;25</p>
<p>City:&nbsp;&nbsp;&nbsp;&nbsp;London</p>

Using   in JavaScript

// Create non-breaking space
const nbsp = '\\u00A0';
const nbsp2 = String.fromCharCode(160);

// Use in strings
const text = \`Hello\${nbsp}World\`;
document.body.innerHTML = text;

// Replace regular spaces with non-breaking spaces
const safeText = "10 000 USD".replace(/ /g, '\\u00A0');
console.log(safeText);  // "10 000 USD" (won't break)

// Add to element
const element = document.querySelector('.price');
element.innerHTML = '50 km';

Using   in CSS (with ::before or ::after)

/* Add non-breaking space before element */
.price::before {
  content: '\\00A0';
}

/* Multiple non-breaking spaces */
.indent::before {
  content: '\\00A0\\00A0\\00A0\\00A0';
}

/* Combination with text */
.label::after {
  content: ':\\00A0';
}

  vs Regular Space

Visual Comparison

<!-- Regular space (can break): -->
<div style="width: 100px;">
  This is a very long sentence that will wrap to 
  the next line when it runs out of space.
</div>

<!-- With &nbsp; (won't break at &nbsp;): -->
<div style="width: 100px;">
  This is a very&nbsp;long sentence that will 
  wrap&nbsp;but&nbsp;these&nbsp;words&nbsp;stay&nbsp;together.
</div>

Best Practices and Alternatives

When NOT to Use  

1. For Layout/Spacing

<!-- ❌ Bad - Using &nbsp; for layout -->
<p>Left&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Right</p>

<!-- ✅ Good - Use CSS -->
<div style="display: flex; justify-content: space-between;">
  <span>Left</span>
  <span>Right</span>
</div>

<!-- Or -->
<div class="container">
  <span class="left">Left</span>
  <span class="right">Right</span>
</div>
<style>
.container { display: flex; justify-content: space-between; }
</style>

2. For Indentation

<!-- ❌ Bad - Using &nbsp; for indentation -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;Indented paragraph</p>

<!-- ✅ Good - Use CSS -->
<p style="margin-left: 2em;">Indented paragraph</p>

<!-- Or -->
<p class="indented">Indented paragraph</p>
<style>
.indented { padding-left: 2em; }
</style>

3. For Vertical Spacing

<!-- ❌ Bad -->
<p>Line 1<br>&nbsp;<br>Line 2</p>

<!-- ✅ Good - Use CSS -->
<p style="margin-bottom: 1em;">Line 1</p>
<p>Line 2</p>

4. For Empty Table Cells

<!-- ❌ Bad -->
<td>&nbsp;</td>

<!-- ✅ Good - Leave empty or use CSS -->
<td></td>
<style>
td { min-width: 50px; min-height: 20px; }
</style>

Better Alternatives

CSS white-space Property

/* Prevent all line wrapping */
.no-wrap {
  white-space: nowrap;
}

/* Preserve all spaces and line breaks */
.preserve {
  white-space: pre;
}

/* Preserve spaces, allow wrapping */
.pre-wrap {
  white-space: pre-wrap;
}

HTML <pre> Tag

<!-- For code or preformatted text -->
<pre>
  This    preserves    all    spacing
  and line breaks automatically
</pre>

CSS Spacing Properties

/* Increase space between words */
.spaced {
  word-spacing: 0.5em;
}

/* Increase space between letters */
.tracked {
  letter-spacing: 0.1em;
}

/* Padding for spacing */
.box {
  padding: 1em 2em;
}

/* Margin for spacing */
.section {
  margin-bottom: 2em;
}

HTML5 <wbr> Tag

<!-- Suggests where line breaks CAN occur (opposite of &nbsp;) -->
<p>supercali<wbr>fragilistic<wbr>expialidocious</p>

Common Use Cases with Examples

Financial Data

<table class="financial">
  <tr>
    <td>Revenue:</td>
    <td>$1&nbsp;234&nbsp;567</td>
  </tr>
  <tr>
    <td>Expenses:</td>
    <td>$890&nbsp;123</td>
  </tr>
  <tr>
    <td>Profit:</td>
    <td>$344&nbsp;444</td>
  </tr>
</table>

Product Specifications

<ul class="specs">
  <li>Weight: 2.5&nbsp;kg</li>
  <li>Dimensions: 30&nbsp;×&nbsp;20&nbsp;×&nbsp;10&nbsp;cm</li>
  <li>Power: 100&nbsp;W</li>
  <li>Voltage: 220&nbsp;V</li>
  <li>Capacity: 500&nbsp;GB</li>
</ul>

Addresses

<address>
  123&nbsp;Main&nbsp;Street<br>
  Apartment&nbsp;4B<br>
  New&nbsp;York,&nbsp;NY&nbsp;10001<br>
  United&nbsp;States
</address>

Phone Numbers

<p>Call us: +1&nbsp;(555)&nbsp;123-4567</p>
<p>International: +44&nbsp;20&nbsp;1234&nbsp;5678</p>
<p>Toll-free: 1-800&nbsp;EXAMPLE</p>

Keyboard Shortcuts

<ul class="shortcuts">
  <li>Save: Ctrl&nbsp;+&nbsp;S</li>
  <li>Copy: Cmd&nbsp;+&nbsp;C</li>
  <li>Paste: Cmd&nbsp;+&nbsp;V</li>
  <li>Undo: Ctrl&nbsp;+&nbsp;Z</li>
  <li>Find: Ctrl&nbsp;+&nbsp;F</li>
</ul>

Scientific Notation

<p>Speed of light: 3.0&nbsp;×&nbsp;10⁸&nbsp;m/s</p>
<p>Avogadro's number: 6.022&nbsp;×&nbsp;10²³</p>
<p>Planck constant: 6.626&nbsp;×&nbsp;10⁻³⁴&nbsp;J·s</p>

Common Mistakes to Avoid

1. Overusing   for Layout

<!-- ❌ Very bad -->
<p>Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;John</p>
<p>Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;john@example.com</p>

<!-- ✅ Good -->
<dl class="info-list">
  <dt>Name:</dt>
  <dd>John</dd>
  <dt>Email:</dt>
  <dd>john@example.com</dd>
</dl>
<style>
.info-list {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0.5em;
}
</style>

2. Using   Instead of Proper Markup

<!-- ❌ Bad -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;• List item</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;• Another item</p>

<!-- ✅ Good -->
<ul>
  <li>List item</li>
  <li>Another item</li>
</ul>

3. Breaking SEO

<!-- ❌ Bad - Looks spammy to search engines -->
<h1>Best&nbsp;&nbsp;&nbsp;&nbsp;Product&nbsp;&nbsp;&nbsp;&nbsp;Ever</h1>

<!-- ✅ Good -->
<h1>Best Product Ever</h1>

4. Ignoring Locale-Specific Number Formatting

<!-- Different locales format numbers differently -->

<!-- US format -->
<p>1,000,000</p>

<!-- European format -->
<p>1&nbsp;000&nbsp;000</p>

<!-- German format -->
<p>1.000.000</p>

<!-- ✅ Best - Use JavaScript for locale-aware formatting -->
<script>
  const num = 1000000;
  document.write(num.toLocaleString());  // Formats based on user locale
</script>

5. Accessibility Issues

<!-- Screen readers pronounce &nbsp; as a space -->
<!-- For truly invisible spacing, use CSS or ARIA -->

<!-- ❌ Bad for accessibility -->
<button>Save&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Document</button>

<!-- ✅ Good -->
<button style="padding: 0.5em 2em;">Save Document</button>

Browser and Email Client Support

Browser Support

✅ Universal support:

• All modern browsers (Chrome, Firefox, Safari, Edge)
• Internet Explorer 5.5+
• Mobile browsers (iOS Safari, Chrome Mobile, Samsung Internet)
• Screen readers (announces as normal space)

Email Client Quirks

<!-- For emails, sometimes better to use: -->
<td style="padding-left: 20px;">Content</td>

<!-- Instead of: -->
<td>&nbsp;&nbsp;&nbsp;&nbsp;Content</td>

Quick Reference

Most Common Uses

<!-- Numbers with units -->
50&nbsp;km
2.5&nbsp;kg
100&nbsp;W
20&nbsp;°C

<!-- Currency -->
$100&nbsp;USD
€50&nbsp;EUR

<!-- Names -->
Dr.&nbsp;Smith
Mr.&nbsp;Jones

<!-- Dates -->
Jan&nbsp;15,&nbsp;2025
Q4&nbsp;2024

<!-- Times -->
3&nbsp;PM
10:30&nbsp;AM

<!-- Math -->
x&nbsp;+&nbsp;y&nbsp;=&nbsp;10

Alternative Entity Names

Summary

The non-breaking space ( ) is essential for keeping related words and numbers together on the same line. Use it for semantic meaning (things that should stay together), not for layout (use CSS instead).

Key Takeaways:

✅   creates a space that prevents line breaks
✅ Use for numbers with units, names, dates, and related text
✅ Don't use for layout, indentation, or spacing (use CSS)
✅ Can be used multiple times for wider spacing
✅ Supported in all browsers and screen readers
✅ Alternative notations:   or  

Related Guides

• Complete HTML Entities Reference
• HTML Special Characters Guide
• HTML Symbols and Unicode
• Browse All HTML Entities →