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

P.S. 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>