Question

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

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

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

提前致谢

P.S。 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没有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”字符。

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

2 个答案: