What is &nbsp in HTML

What is nbsp in HTML

NBSP (non-breaking space) — the symbol for non-breaking space in text. Unlike the normal space, &nbsp prevents the browser from breaking the line where you put it. It serves to improve the readability of the text.

How to use &nbsp in HTML

In HTML a non-breaking space is defined as " ".

John Doe

Result: John Doe

What is the difference between &nbsp and the usual space?

  • The &nbsp differs from the regular space in that the regular space does not prohibit line breaks. Where &nbsp stands, there will be no line break.
  • In HTML, two or more spaces in a row are converted to one space. Whereas the number of &nbsp spaces remains as specified in the HTML code.

When to use &nbsp ?

Examples of when to use &nbsp:

  • Between initials and surname («Doe J.J.»).
  • In numbers with spaces («300 000»).
  • In dates («4 July»).
  • Between numbers and units («300 Spartans», «20000 leagues under the sea», «1984 year»).
  • Between the abbreviation and name or title («c. London», «r. Amazon», «Mr. Doe»).
  • Between the number or paragraph sign and number («№ 1», «§ 4»).
  • In software names («Android 11»).

When not to use &nbsp ?

It is best not to use two or more &nbsp in a row to increase the space for styling or text arrangement. This can have a negative effect when displaying text on small screens.

Alternatives to &nbsp

CSS property «white-space: nowrap»

As an alternative to &nbsp, to disable hyphenation, you can use the CSS property: white-space: nowrap

It is even recommended if you want to prohibit word hyphenation in text without spaces:

  • Phone number: 111-11-11
  • Word with hyphens: «time-out»

Tag «nobr» (Unbreakable range)

The «nobr» tag can be used to wrap text in which you want to disallow line breaks:

  • <nobr>212-85-06</nobr>
  • <nobr>twenty-five</nobr>

Since you've made it this far, sharing this article would be highly appreciated!