多行文本在firefox中使用knockoutjs绑定显示为单行

Question

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

我们有一个textarea和span,其值/文本绑定到同一个observable.目前,Chrome和IE确实在span元素中显示多行文本,但firefox没有(它只是将几行连接成1).

有人可以解释问题是什么/在哪里？也许有人已经遇到过这个问题而且有解决方案？

提前致谢

PS Firefox 12,IE 9,Chrome 18

Answer 1

white-space: pre-wrap在跨度上设置样式将使其工作:http://jsfiddle.net/mbest/NznVZ/12/

这是一个小背景.<br>当使用设置文本时,IE和Chrome会将字符串中的换行符转换为HTML中的元素innerText,这就是Knockout使用的内容.Firefox没有innerTextKnockout使用textContent,它不会对字符串进行任何转换.(有趣的是,当您使用该white-space: pre-wrap样式时,Chrome会与Firefox匹配.)

IE:

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

Chrome(没有白色空间风格):

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

Firefox和Chrome(带白色空间风格):

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