CODEWITHSUNDEEP
javascripthtmlcss
sazr
sazr

Reputation: 25928

Possible to make browser not remove   characters

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;

Upvotes: 1

Views: 715

Answers (3)

Deborah
Deborah

Reputation: 4575

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.

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

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 &nbsp; 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.

Upvotes: 1

Jace
Jace

Reputation: 3072

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.

Upvotes: 4

Related Questions