El texto de varias líneas se muestra como una sola línea en Firefox usando enlaces knockoutjs

Question

Acabo de encontrar un comportamiento bastante extraño de texto de líneas múltiples en Firefox usando enlaces knockoutjs. Aquí está mi violín: http://jsfiddle.net/NznVZ/.

Tenemos un área de texto y un lapso con valor/texto vinculante para el mismo observable. Actualmente, Chrome e IE sí muestran un texto de líneas múltiples en el elemento span, pero firefox no (simplemente concatena varias líneas en 1).

¿Puede alguien explicar cuál es/dónde está el problema? Tal vez alguien ya se ha encontrado con este problema y tiene una solución?

Gracias de antemano

P. S. Firefox 12, IE 9, Chrome 18

Answer 1

Ajuste del estilo white-space: pre-wrap en el lapso hará que funcione: http://jsfiddle.net/mbest/NznVZ/12/

Aquí hay un poco de historia. IE y Chrome convertirán las líneas nuevas en la cadena a los elementos <br> en el HTML cuando el texto se establece usando innerText, que es lo que utiliza Knockout. Firefox no tiene innerText, por lo que Knockout usa textContent, que no realiza ninguna conversión de la cadena. (Curiosamente, Chrome coincide con Firefox cuando se utiliza el estilo white-space: pre-wrap.)

IE:

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

Chrome (sin estilo de espacio en blanco):

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

Firefox y Chrome (con blanco- espacio estilo):

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

Answer 2

Si desea una solución javascript: http://jsfiddle.net/9KAQX/

La única ventaja aquí es que los caracteres "\ n" no están presentes en el tramo.