CODEWITHSUNDEEP
htmlwhitespace
Damon
Damon

Reputation: 10799

What are rules for when consecutive spaces will appear in html?

I thought that &nbsp was necessary any time you wanted more than one space character to show up in html, but this site is showing me that multiple consecutive spaces are all being rendered... why is that?

Upvotes: 1

Views: 3956

Answers (4)

Diosney
Diosney

Reputation: 10580

@Damon

  is the entity used to represent a non-breaking space. It is essentially a space, the primary difference being that a browser should not break (or wrap) a line of text at the point that this entity occupies, it also prevents the collapsing of multiple consecutive whitespace characters into a single space, which is the current browsers standard behaviour.

When you look into the source of the site that you mention, you can see that the site in fact is using the   entity to format the text:

<span class="style_3" style="line-height: 23px; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>

Upvotes: 0

Peter Kazazes
Peter Kazazes

Reputation: 3628

A regular space () wraps to the next line. A non-breaking space &nbsp; prevents wrapping to the next line.

Assume the | | are sides of the div:

This is how a regular space will be rendered:

| |    
| |
| |
| |

A non-breaking space however will continue on the same line. In HTML, this will cause the element that the space is in to stretch beyond it's auto width.

|  |    
| |
| |
| |

This will in turn push out the entire width of that side:

|  |    
|  |
|  |
|  |

Multiple whitespace characters will render, however they do not perform the same way a non-breaking whitespace does.

Take a look at this jsFiddle, it will clear any confusion up.

Upvotes: 1

mopsled
mopsled

Reputation: 8505

If you look closely at the source (before it is interpreted by a browser), you'll find that the website does in fact use &nbsp; very heavily in the site:

Example (before the ONE FOR THE ROAD line)

<span style="line-height: 23px;"class="style_3">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span>

<span style="line-height: 23px; " class="style_1">
    ONE FOR THE ROAD
</span>

Try saving the page to your computer (with the browser's saving functionality, not copy-paste), and view the source in Notepad or a similar text editor, and you will see the &nbsp; entity everywhere.

Upvotes: 4

Mrchief
Mrchief

Reputation: 76208

A much cleaner way is to use CSS white-space property.

Having the value set to pre or pre-wrap or pre-line will all display multiple spaces (line break handling will be different with each).

Here's a good post about that: http://www.impressivewebs.com/css-white-space/

Upvotes: 2

Related Questions