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.