Multiline text is displayed as a single line in firefox using knockoutjs bindings

Question

I've just ran into a pretty strange behaviour of multiline text in firefox using knockoutjs bindings. Here is my fiddle: http://jsfiddle.net/NznVZ/ .

We have a textarea and span with value/text binding to the same observable. Currently, Chrome and IE do display a multiline text in span element, but firefox doesn't (it just concatenates several lines into 1).

Can someone explain what is/where is the problem? Maybe someone had already run into this issue and has a solution?

Thanks in advance

PS Firefox 12, IE 9, Chrome 18

Answer 1

Setting the white-space: pre-wrap style on the span will make it work: http://jsfiddle.net/mbest/NznVZ/12/

Here's a little background. IE and Chrome will convert the newlines in the string to <br> elements in the HTML when the text is set using innerText , which is what Knockout uses. Firefox doesn't have innerText so Knockout uses textContent , which doesn't do any conversion of the string. (Interestingly, Chrome matches Firefox when you use the white-space: pre-wrap style.)

IE:

<span>First line.<br>Second Line.<br>&nbsp;&nbsp;&nbsp;&nbsp; Third line preceded with 5 space characters.</span>

Chrome (without white-space style):

<span>First line.<br>Second Line.<br>     Third line preceded with 5 space characters.</span>

Firefox and Chrome (with white-space style):

<span>First line.
Second Line.
     Third line preceded with 5 space characters.</span>

Answer 2

If you want a javascript solution: http://jsfiddle.net/9KAQX/

The only advantage here is that "\\n" characters are not present in the span.