Home/ Questions/Q 7896969
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T08:01:56+00:00

I’ve just ran into a pretty strange behaviour of multiline text in firefox using

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0