Non-Breaking Space in a JavaScript String

1. What Are Character Entities in HTML
2. Use &nbsp to Add Non-Breaking Spaces in HTML
3. Use &ensp and &emsp to Add Multiple Spaces in HTML
4. Why We Need a Non-Breaking Space in Our Code in HTML

In HTML, we can’t create an extra blank space after the space character with the spacebar. So if we want ten empty spaces in our HTML code and try to add them with the spacebar, we’ll only see one space in the browser.

Also, one or more of the words supposed to be together might break into a new line. This article shows how to create any number of blank spaces we want in our code and add a non-breaking space with the &nbsp character entity in HTML.

What Are Character Entities in HTML

Character entities are used in the browser to show various characters.

For example, the less than symbol (<) and greater than symbol (>) in HTML are reserved for tags. HTML may misinterpret them as opening and closing tags if you use them in your code.

You must utilize their respective character entities (< and >) if you want to use them as “greater than” and “less than”. After that, you can safely view them in your browser.

Use &nbsp to Add Non-Breaking Spaces in HTML

Because the browser will only display one blank space no matter how many characters you have in your code, HTML has the &nbsp character entity. The &nbsp character entity is used in HTML.

It enables the presentation of many blank spaces.

Below is how your code would look if you didn’t use the &nbsp character entity.

<div>
    <p>
      Today is 3rd March 2022, the time right now is 2:15 pm and the temperature is 24 degree celsius.
    </p>
</div>

To make the HTML clearer and simpler to read, like what we’re attempting to show, we include some CSS.

body {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
     max-width: 800px;
     margin: 0 auto;
     font-size: 2rem;
}

span {
     background-color: #2ecc71;
}

We use the &nbsp character elements in the HTML code below to create numerous blank spaces.

<div>
   <p>
     Today is &nbsp; &nbsp; &nbsp; 3rd March 2022, the time right now is 2:15 pm and the temperature is &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 24 degree celsius.
   </p>
</div>

There are three blank spaces between Today is and 3rd March, and five between temperature is and 24 degree. We inserted 3 and 5 &nbsp characters, respectively.

That wouldn’t be possible without the &nbsp character entity.

Use &ensp and &emsp to Add Multiple Spaces in HTML

What if you want ten blank spaces in your code? It would be redundant and dull to write &nbsp ten times.

Instead, the &ensp character entity for two non-breaking spaces and &emsp for four non-breaking spaces are provided by HTML.

<div>
   <p>
    Today is &ensp; &nbsp; 3rd March 2022, the time right now is 2:15 pm and the temperature is &emsp; &nbsp; 24 degree celsius.
   </p>
</div>

In the code above, we inserted three blank spaces between Today is and 3rd March using   once (2 spaces) and &nbsp once (1 space). Then we used 1 &emsp (4 spaces), and 1 &nbsp (1 space) entities between temperature is and 24 degrees.

As a result, the number of blank spaces in the second example remains the same.

Why We Need a Non-Breaking Space in Our Code in HTML

Initials, units, dates, amounts of money and other words that are supposed to be together may be broken out onto another line by HTML.

This is prevented by the &nbsp character entity. Using the &nbsp character between such words creates space between them and prevents any of the words from breaking into a new line.

 <div>
    <p>
         Today is &nbsp; 3rd March 2022, the time right now is 2:15 pm and the temperature is 24 &nbsp; degree celsius.
    </p>
</div>

To make it clearer and explain what we’re attempting to show, we’ve added some CSS.

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    max-width: 800px;
    margin: 0 auto;
    font-size: 2rem;
}

span {
    background-color: #2ecc71;
}

The result looks like below.

As you can see, the 24-degree celsius breaks, which is not ideal because it may cause the reader to become confused.

The character entity &nbsp binds the two words together.

<div>
    <p>
     Today is &nbsp; 3rd March 2022, the time right now is 2:15 pm and the temperature is 				24&nbsp;degree celsius.
    </p>
</div>

You’ve seen how the &nbsp, &ensp, and &emsp character entities can be used to display blank spaces in the browser. Unfortunately, utilizing the spacebar alone will not suffice.

You can also use the &nbsp character entity to keep words that should stay together from breaking into the following line in certain places.