使用基因敲除js绑定在firefox中将多行文本显示为单行

Question

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

我们有一个textarea和span，值/文本绑定到相同的可观察对象。 目前，Chrome和IE确实在span元素中显示多行文本，但是firefox不会（仅将几行连接为1）。

有人可以解释问题出在哪里吗？ 也许有人已经遇到了这个问题并找到了解决方案？

提前致谢

PS Firefox 12，IE 9，Chrome 18

Answer 1

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

这是一些背景。 当使用innerText设置文本时，IE和Chrome会将字符串中的换行符转换为HTML中的<br>元素，这是Knockout所使用的。 Firefox没有innerText因此Knockout使用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>

Answer 2

如果您要使用JavaScript解决方案，请访问： http : //jsfiddle.net/9KAQX/

唯一的好处是跨度中不存在“ \\ n”字符。