What to use instead of nbsp

Web designers should use the margin, padding, and position properties of CSS instead. This will ideally separate the content from style.

There are also HTML elements, such as pre, which preserve the spaces, but these are only recommended to use in case you need to markup code examples or show contents of .txt files, and other pre-formated text.

Using br Elements or Paragraphs

A lot of designers prefer to use br elements, because they are easier for the developer to deal with. You can use a single regular expression when using br, while you may have to use multiple when using paragraphs.

We recommend that you use what is the easiest for you. But, if possible, try to stick with paragraphs. You can use the below regular expressions to replace line breaks properly.

/[\r\n]+/

Keep in mind that users might also insert multiple spaces, so you would also want to replace these with a single space, as well as trim the start and end of the imput. Finally, you should also delete empty paragraphs, created by your regular expressions. When you have done all this, you end up with a very clean input from the user.

If you are using PHP, i would recommend that you use something like the below script:

function ReplaceLineBreaks($input) {
// Replaces any number of linebreaks, with a single paragraph.
  $final = preg_replace("/[\r\n]+/", "</p><p>", $input);

// Replace any number of spaces/tabs with a single space.
  $final = preg_replace("/[\t]+/", " ", $final);

// Remove empty p elements inserted (if any)
  $final = str_replace("<p></p>", "", $final);

// Removes white space at the start and end of the input.
  $final = trim($final);
  return $final;
}

Using images for white space

While i shouldn't have to mention this, for obvious reasons, some people might get the idea. It is also possible to insert a single-pixel transparent image.

So let me just get this straight, using images for white space, is one of the worst things you can do! This is both because it works to bloat the source, and because it creates additional http requests, potentially slowing down your site. In short, use CSS instead!

Tell us what you think: