javascript - 使用 knockoutjs 绑定(bind)在 firefox 中将多行文本显示为单行

Question

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

我们有一个 textarea 和 span，值/文本绑定(bind)到同一个 observable。 目前，Chrome 和 IE 会在 span 元素中显示多行文本，但 firefox 不会(它只是将几行连接成 1)。

谁能解释一下问题是什么/哪里出了问题？ 也许有人已经遇到过这个问题并有解决方案？

提前致谢

附言火狐 12、IE 9、Chrome 18

Answer 1

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

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

即:

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