Among the almost infinite list of HTML entities, the non-breaking space ( ) is one of the most popular but very little understood.
The correct place for a is, for instance, in “Mr. Smith”. The will avoid a line break between Mr. and Smith, while leaving a space between them.
The non-breaking space earned its fame because in the dark days of the table layouts people needed to put content on certain elements without visual rendering.
As the normal space is discarded by the browser in most situations an entity like the non-braking space, which is always considered and yet has no shape was very welcome to leave a gutter.
Yet, the should not be used to leave gutters. While it is quick and easy to put them, is really a nightmare to upgrade, because markup and presentation are all mixed. The role of the non-breaking space is actually to bind things together and not so separate them.














Guilherme
is a Web Designer focused on web standards and the web ahead of us.







4 Comments
If you don’t want a line break between two or more words, they’re an important element. This importance justify the use of span or similar tag. So white-space:nowrap (or nobr tag) is enough and to spare. Things like are the enemy ;).
Ok, that was a joke! But I believe that it should be avoided indeed. Or you think they don’t make your code dirty?
@Oda -
I don’t understand. Why you think makes the code dirty? I don’t think so. I think is as natural as any other HTML entity (when properly used).
I think that using
<span class="nobreak">Mr. Smith</span> .nobreak { white-space:nowrap }may work, but at a cost.
Not breaking between Mr and Smith is related to the very own structure of the text, and not really to the typographycal presentation, so I don’t think it belongs there, just as tables don’t belong to layout structures.
Then, even if the solutions were equally acceptable, why write all that much, instead of a simple ? Specially when I think this kind of thing should be enforced by CMS, just line thin spaces &thsp;, em-spaces  , en-spaces em-dashes — and many others.
I’d love a powerful typographic enhanced CMS :-)
Ok, I agree non-breaking space is just another HTML element and perhaps it does not make the code dirty.
I’ve got the point about CMS and that is a good example where the non-breaking spaces are welcome!
Talking about a design, I insist if you dont want a line break you must have a good reason. If you dont then I give up ;)
If you do have then I guess you want more things than just avoid a line break. Why? Cause the set of words without a line break probably represents a special element of layout. In this case an span tag is more appropriate.
Perhaps I’m wrong… Can you give me an example where this set of words are not so special? “Mr. Anderson” (hehe) is not a good example: why the hell you dont want a line break?! :D
Note that I agree with your post. My point is the real necessity of non-breaking space.
@Oda -
The reason for the non-breaking space dates way before the advent of the web. While in modern days we call it non-breaking space, before electronic typesetting you would hear typographers to say:
And one of these circumstances is between a treatment pronoun and the name, as in Mr. Smith, Mrs. Robinson or Sgt. Pepper’s
Non breaking space is just the electronic incarnation of this rule.
Trackbacks