DEV Community

loading...
Cover image for CS Trivia#8: What is & nbsp; ?!

CS Trivia#8: What is & nbsp; ?!

Sylwia Vargas
I teach React, Redux, JavaScript, Ruby, Rails at Flatiron School | I care about web accessible and inclusive tech | she/her
・3 min read

edit: I know that the title contains a typo. If you're curious why, jump to the "Typing it out" section.

Welcome to my little CS trivia series. Every week I post a new trivia piece.

Today's question is...


What is   ?!

In all honesty, the first time I saw this during bootcamp, I really thought it was some encoding bug. Later I noticed it being a solution proposed on StackOverflow to some problem and that really baffled me. First of all —- what is it? Secondly, why is it so odd? And finally, who remembers such a line of nonsensical characters?

The non-breaking space

These letters are really just a minimalistic version of "non-breaking space", which is a space character that prevents an automatic line break at its position. So, really, it's just another empty space but with different properties.

Typing it out

In fact, you can type the character with your own keyboard by pressing option + space on Mac or Ctrl+Space on Windows. It will look like space but its encoding will be different.
When it comes to HTML you can use the names of this whitespace symbol by either writing   or  . By the way, see what happens when I try to google it:

Screen recording showing google interprets   as an empty space and not letters

As you see, Google interprets   as non-breaking space and — it cannot search for it. However, if you google  , you will see plenty of results. The reason why Google "breaks" on   is because it is a so-called "decimal HTML entity" whereas   is the same character in "human" version of the html, which Google doesn't speak.

Another example from just a minute ago: I just needed to change the title of this post after publication because...

Screen recording showing the blog post title on the dev page flicking between ` ` and a visually empty space

... otherwise the blog post title on the dev page flicking between   and a visually empty space, which is because markdown and html view   as empty space. I know it contains a typo. I know.

The difference between   and ""

The   and an empty string ("") are different. For instance, in HTML, trailing empty strings will collapse into just one, whereas non-breaking space will always print in the amount you desired. See here:

<span>Word1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Word2</span>
gets translated to:
Word1      Word2

whereas <span>Word1 Word2</span> (6 spaces in markdown version)
gets translated to:
Word1 Word2

Now, that sounds like an easy fix for all the styling and centering problems but don't give in to the temptation.

When not to use &nbsp;?

Although you might be tempted to add extra space to your HTML elements by adding the non-breaking space, you should not do that. Instead, resort to padding or margin properties of CSS. Otherwise, you will run into problems when trying to make your page responsive.

When to use &nbsp;?

Use it as its design intended: between two words that should not have a line break inserted between them by word wrapping. As explained by Alenanno on StackExchange:

  1. It is advisable to use a non-breaking space (also known as a hard space) to prevent the end-of-line displacement of elements that would be awkward at the beginning of a new line:
    • in expressions in which figures and abbreviations (or symbols) are separated by a space (e.g. 17 kg, AD 565, 2:50 pm);
    • between the date number and month name (e.g. 3 June or June 3);
    • in other places where breaking across lines might be disruptive to the reader, especially in infoboxes, such as £11 billion, June 2011, 5° 24′ 21.12″ N, Boeing 747, after the number in a numbered address (e.g. 123 Fake Street) and before Roman numerals at the end of phrases (e.g. World War II and Pope Benedict XVI).
  2. A hard space can be produced with the HTML code   instead of the space bar; 19 kg yields a non-breaking 19 kg.
  3. A literal hard space, such as one of the Unicode non-breaking space characters, should not be used since some web browsers will not load them properly when editing.
  4. Unlike normal spaces, multiple hard spaces are not compressed by browsers into a single space.
  5. A non-breaking space should be used before a spaced en dash.

Cover photo by Felix Mittermeier from Pexels

Discussion (12)

Collapse
mayankjoshi profile image
mayank joshi • Edited

I encountered &nbsp when I started using WordPress, you give enter a new line in the visual editor in code editor you will see &nbsp written.

But, I understood it's actual functionality when I was trying to add new line(lots of space) in my twitter bio.

'
As you see, Google interprets   as non-breaking space and — it cannot search for it.'

I didn't understand this. Why google is doesn't show results for &#160; when it displays results for &nbsp?

Collapse
sylwiavargas profile image
Sylwia Vargas Author

Ah, thank you for the feedback! I'll explain it better in the post.
The reason why Google "breaks" is because &#160; is decimal HTML entity whereas &nbsp; is the same character in "human" version of the html, which Google doesn't speak. Hope this clarified it!

Collapse
mayankjoshi profile image
mayank joshi • Edited

I too want to add something,

I noticed an interesting behaviour, when I wrote &#160; in the dev.to markdown(without the enclosings), and did the preview, nothing was visible in the comment screen area. But in text editor I was able to type it.

Do try this.

Same goes for Google, if you add a space in Google search bar and try searching for it, Google won't search, but if you will enter &#160 this will be visible but when submitted, it will be converted into a blank space. And google can't search for blank space, because there is nothing on the search bar after submitting it.

Thread Thread
sylwiavargas profile image
Sylwia Vargas Author

Lol, it's all hilarious. I just noticed that you can't even start a google search with a space 🤓

Thread Thread
mayankjoshi profile image
mayank joshi • Edited

Correct we can't Google a blank space 😂.

Collapse
bpedroza profile image
Bryan

I did know what nbsp was, but didn't ever even think to use it as intended (or know what intended use was). There is so much to know out there. I actually have a perfect place to apply this new knowledge today.

Thanks so much for sharing!

Collapse
sylwiavargas profile image
Sylwia Vargas Author

Glad to hear! Where are you going to use it? So curious!

Collapse
bpedroza profile image
Bryan

A multi word label I don't want breaking (or where I want to control the break) on tablet sized screens. I didn't know how I could control which words would break apart, so it's just kind of hard to read on a tablet now. Was playing around with wrapping some words in spans and using css to control it, but this is a way simpler solution.

Thread Thread
sylwiavargas profile image
Sylwia Vargas Author

Wow what a great timing!

Collapse
scrabill profile image
Shannon Crabill

I used &nbsp; a lot in the email dev world. It keeps empty cells from collapsing, even if it has a set height.

Collapse
bpedroza profile image
Bryan

This is really the only time I had ever used it. Before the days of bootstrap when table layouts were all the rage. Glad I'm not the only one. 😄

Collapse
sylwiavargas profile image
Sylwia Vargas Author

oh good to know! I have never done any email layout-related stuff before. Thanks!