Multiline text is displayed as a single line in firefox using knockoutjs bindings
firefox, javascript, knockout.js
Solution
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> 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>
Problem
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