replacing spaces with  

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

DEMO

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

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.