Possible to make browser not remove   characters

Question

I know modern browsers remove most space chars and '&nbsp'; characters insider a paragraph element. But is there a way to get the browser to not remove the space chars?

Maybe a CSS attribute, or HTML doctype to use?

Or maybe my last resort is to use javascript to convert every 4 space characters to tabs?

Example of the text I want to display:

<p>There    should    be    gaps    of    4    chars    tween    each    word</p>

If my only resort is Javascript; can you tell me if my regular expression will correctly change any " " char(that occurs twice or more) with an "_" char?

var p = document.getElementById("myP");
var con = p.innerHTML;
con = con.replace("[ ]{2,}", "_");
p.innerHTML = con;

Answer 1

Is there any reason using <pre> tags wouldn't be suitable for this? Because that's what it sounds like you need.

Output (wrapped your content above in <pre></pre> tags):

There    should    be    gaps    of    4    chars    tween    each    word

Also, <pre> tags can still be styled.

Answer 2

You can use white-space: pre-wrap in CSS; it is supported by modern browsers (not IE 7). It allows word wrapping, but the use of   prevents it, so you would need to use normal spaces, except in situations where line breaks are to be prevented.

Depending on the context and the purposes, it might be better to use word-spacing in CSS if you really want just increased spacing between words.

Technically, modern browsers do not ignore no-break spaces; they just collapse any sequence of whitespace, as browsers have always done, and count no-break spaces as whitespaces, which is new.

Answer 3

It would eliminate collapsing white space and also be more efficient for the browser to put a span around each word and then use the following CSS:

#myP span {
  display: inline-block;
  margin-right: 2em; /* or put the amount of space in pixels */
}

...like so:

<p id="myP"><span>There</span><span>should</span>be</span><span>gaps</span></p>

This also makes it much easier to adjust or change the spacing later on, since you can just modify the spacing in the CSS instead of adding or removing a horde of &nbsp's.