replacing spaces with  

Question

Let's assume the following element (look for the trailing and leading spaces):

<p>
    <span class="item">Lorem Ipsum is simply dummy text </span><span class="item">of the printing and typesetting</span><span class="item"> industry.</span>
</p>

I want to replace all spaces with  , due to display: inline-block weird behavior shown here: http://jsfiddle.net/SQuUZ/ (I don't know about all browsers, but latest Chrome and Firefox both act the same).

Now, since javascript is an option here, so is jQuery, I could:

$('p').text($('p').text().replace(/ /g, ' '));

But it escapes the   and turns out into a mess of entities.

Obviously, for such purposes we could use $('p').html():

$('p').html($('p').html().replace(/ /g, ' '));

But this one is even worse, because, it also adds   within the tags themselves:

<p>
    <span&nbsp;class="item">Lorem&nbsp;Ipsum&nbsp;is&nbsp;simply&nbsp;dummy&nbsp;text&nbsp;</span><span&nbsp;class="item">of&nbsp;the&nbsp;printing&nbsp;and&nbsp;typesetting</span><span&nbsp;class="item">&nbsp;industry.</span>
</p>

<!-- TL;DR -->
<span&nbsp;class="item"></span> <!-- is actually invalid... -->

And it breaks everything...

Notes:

• There won't only be <span> elements with class item inside the container (that may also not always be <p>).
• Slow regular expressions is an option (the problem is, I cannot come up with one...).

What options do I have here?

Update:

In fact, could anyone explain why there is such a bug with that multi-line / single-line display: inline-block;? (See fiddle link above, and examine...)

Question migrated to display: inline-block; weird spacing behavior

Answer 1

$('p').contents().filter(function(){
    return this.nodeType == 3 // Text node
}).each(function(){
    this.data = this.data.replace(/ /g, '\u00a0');
});

DEMO

Answer 2

Even tho jQuery is really great and does all things, CSS could also work in some cases:

white-space: pre-wrap;

Demo.

CSS3 related: text-space-collapse

Answer 3

could anyone explain why there is such a bug with that multi-line / single-line display: inline-block;? (See fiddle link above, and examine...)

Consider:

​<p><span style="display:inline-block">lorem </span>​​​​​​​​​​​​​​​​​​<span>ipsum</span></p>

The space character is inside the line box container created by display:inline-block. CSS 2.1 16.6.1 describes how spaces in a line box must be processed:

As each line is laid out … [i]f a space (U+0020) at the end of a line has 'white-space' set to 'normal', 'nowrap', or 'pre-line', it is … removed.

As the space is at the end of the line inside the inline block, it is removed.

Contrast:

<p><span style="display:inline-block">lorem</span> <span>ipsum</span></p>​

In this case, the space is not removed, because it is between two inline-level elements that make up a single line box.

Answer 4

you can use the <pre> </pre> element to make spaces visible. Its a fast solution if you want to visually display, lets say, ascii art.