Trying to add a number of spaces within list string like:

<li>Going (25 -going.length spaces added)        to New York</li>
<li>Departing (25 - departing.length spaces added)    to Boston</li>

These lines of HTML are prepared in JavaScript and then displayed with jQuery.

But when they are ultimately rendered, the white space is eliminated. Inspecting the list elements shows that the white space is indeed in the HTML code, but not being displayed.

Any ideas?

PS: I just noticed when I had a bunch of spaces in the list items above in this post, the spaces are eliminated from this post!

Trying to add a number of spaces within list string like:

<li>Going (25 -going.length spaces added)        to New York</li>
<li>Departing (25 - departing.length spaces added)    to Boston</li>

These lines of HTML are prepared in JavaScript and then displayed with jQuery.

But when they are ultimately rendered, the white space is eliminated. Inspecting the list elements shows that the white space is indeed in the HTML code, but not being displayed.

Any ideas?

PS: I just noticed when I had a bunch of spaces in the list items above in this post, the spaces are eliminated from this post!

• javascript
• html
• css

Share Improve this question Follow edited Mar 26, 2014 at 16:48 R3tep 12.9k1010 gold badges5151 silver badges7676 bronze badges asked Mar 26, 2014 at 16:18 user3465091user3465091 1333 bronze badges 3

• Whitespace is ignored in HTML. – John Conde Commented Mar 26, 2014 at 16:19
• use   if you want to force spacing. since you are preparing the html with javascript, it should be novel to write a for loop looping over 25 - going.length (or however many spaces you want) and then just print   once in each loop iteration – celeriko Commented Mar 26, 2014 at 16:22
• Yes, thank you! That's exactly what I did... and it worked, though it created another problem... which was fixed using a monospaced font! Thanks again! – user3465091 Commented Mar 28, 2014 at 0:07

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

You have -at least- two ways to do what you want:

1st way: which I don't like

Using   several times like this

<li>Going&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to New York</li>

2nd way: better than 1st way

surround your li item with <pre></pre> like this:

<li><pre>Going        to New York</pre></li>
<li><pre>Departing        to Boston</pre></li>

HERE IS THE 2nd way EXAMPLE

Of course you have many other ways with css as other friends suggested, in my answer you will find the HTML solution.

3rd Way: using css:

HTML:

<li class="cssLI"><span class="type">Going to</span><span class="city">New York</span></li>
<li class="cssLI"><span class="type">Departing to</span><span class="city">Boston</span></li>

CSS:

.cssLI{
    width: 100%;
}
.city{
    float: right;
}

HERE IS THE 3rd way EXAMPLE

Multiple whitespaces are ignored in HTML and only single whitespace is printed on screen. You can use   instead.

So this way you can use this code to show 1 whitespace. Your code would be:

<li>Going (25 -going.length spaces added)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to New York</li>

This would be rendered as you want it to be.

Its not good to add nbsp; or to add space instead you may add markup like

<ul class="list">
     <li>
            <span>Going </span>
            <span>(25 -going.length spaces added)</span>        
            <span>to New York </span>
        </li>
</ul>

and in css you may write as

ul.list li span {display-inline:block; min-width:70px} /*as per your need you may assign class to li */

Hope it helps!

Afzaal is right. It would look like this:

<li>Going (25 -going.length spaces added)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to New York</li>

Though you can also set it like this (and it's a better practice):

 <li>Going (25 -going.length spaces added)<span style="margin-left:40px;">to New York</span></li>

You can use some   but it's not a good way. Maybe you can use a table. Or, better, align some span or some div, and display them with CSS.