多行文本显示为firefox中的单行使用knockoutjs绑定 [英] Multiline text is displayed as a single line in firefox using knockoutjs bindings

问题描述

我刚刚在Firefox中使用knockoutjs绑定遇到了一个非常奇怪的多行文本行为。
这是我的小提琴： http://jsfiddle.net/NznVZ/ 。

我们有一个textarea和span / value / text绑定到相同的observable。
目前，Chrome和IE在span元素中显示多行文本，但firefox没有（只是将多行连接成1）。

有人可以解释什么是/问题在哪里？
也许有人已经遇到了这个问题，并有一个解决方案？

在此先感谢

PS Firefox 12，IE 9，Chrome 18

解决方案设置 white-space：pre-wrap 跨度上的code> style将使其工作： http://jsfiddle.net/mbest/ NznVZ / 12 /

这里有一个小背景。当使用 innerText < br> 元素这是Knockout使用的。 Firefox没有 innerText ，所以Knockout使用 textContent ，它不会对字符串进行任何转换。 （有趣的是，当您使用空格：pre-wrap 样式时，Chrome与Firefox匹配。）
$ b IE：

 < span>第一行。 &安培; NBSP;&安培; NBSP;第三行以5个空格字符开头。< / span> 
  

Chrome（不含空格）：

 < span>第一行。< br>第二行。< br>第三行以5个空格字符开头。< / span> 
  

Firefox和Chrome（带有空白样式）：

 < span>第一行。 
第二行。 
第三行以5个空格字符开头。< / span> 
  

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

解决方案

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>

这篇关于多行文本显示为firefox中的单行使用knockoutjs绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！