HtmlHow-ToBeginner · 3 min read

How to Add Non-Breaking Space in HTML: Simple Guide

To add a non-breaking space in HTML, use the   character entity. It prevents the browser from breaking a line at that space, keeping words or elements together.

📐

Syntax

The non-breaking space in HTML is written as  . It is a special character entity that represents a space which the browser will not break into a new line.

 : The entity code for a non-breaking space.
Use it between words or elements where you want to prevent line breaks.

html

&amp;nbsp;

Output

💻

Example

This example shows two words separated by a normal space and two words separated by a non-breaking space. The non-breaking space keeps the words together on the same line.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Non-breaking Space Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 300px;
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <p>Normal space: Hello world</p>
  <p>Non-breaking space: Hello&nbsp;world</p>
</body>
</html>

Output

Normal space: Hello world Non-breaking space: Hello world (words stay together on the same line)

⚠️

Common Pitfalls

One common mistake is using multiple normal spaces to try to keep words together, but browsers collapse normal spaces and allow line breaks there. Another is forgetting to use the semicolon ; after  , which can cause it not to work.

Also, avoid using non-breaking spaces excessively as it can make text harder to read or break responsive layouts.

html

<!-- Wrong: multiple normal spaces -->
<p>Hello    world</p>

<!-- Right: use non-breaking space -->
<p>Hello&nbsp;world</p>

📊

Quick Reference

 : Non-breaking space character entity.
Use to keep words or elements on the same line.
Always include the semicolon ; at the end.
Works in all modern browsers.

✅

Key Takeaways

Use   to add a non-breaking space in HTML.

Non-breaking spaces prevent line breaks between words or elements.

Always include the semicolon ; after  .

Avoid overusing non-breaking spaces to keep text readable and responsive.

Non-breaking spaces work consistently across all modern browsers.