Question

In my <p> tag I have some text, and it’s broken on many lines.

<p>
some really long text broken in many places...
</p>

Normal behavior is not to show space character on line break, but in my application I need to show it, is it possible in any way ?

EDIT:

If You run this:

<p style="width:100px;">
    <span style="background-color: #008000">
        some long text bla bla bla bla bla bla bla
    </span>
</p>

You can see, that space (“&#32”) between words, appears like any other character, but there is no space on the end of each line.

Answer 1

Your answer can be found in the css white-space property. This should be your HTML:

<p style="width:100px;">
  <span style="background:#008000;">some long text bla bla bla bla bla bla bla</span>
</p>

And your CSS should be:

span {
  white-space: pre-wrap;
}

One problem with white-space:pre-wrap; though, is that it also includes all tabs you may use in your HTML formatting. So you can’t indent the text inside the <span> tags.

Take a look at this fiddle I made: jsfiddle.net/jWbgW/

Of course, you should really put all your style definitions in the css, but that’s a given.