[英]Multiline text is displayed as a single line in firefox using knockoutjs bindings
I've just ran into a pretty strange behaviour of multiline text in firefox using knockoutjs bindings. 我刚刚在Firefox中使用基因敲除js绑定遇到了多行文本的非常奇怪的行为。 Here is my fiddle: http://jsfiddle.net/NznVZ/ . 这是我的小提琴: http : //jsfiddle.net/NznVZ/ 。
We have a textarea and span with value/text binding to the same observable. 我们有一个textarea和span,值/文本绑定到相同的可观察对象。 Currently, Chrome and IE do display a multiline text in span element, but firefox doesn't (it just concatenates several lines into 1). 目前,Chrome和IE确实在span元素中显示多行文本,但是firefox不会(仅将几行连接为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 提前致谢
PS Firefox 12, IE 9, Chrome 18 PS 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/ 在跨度上设置white-space: pre-wrap
样式将使其起作用: 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. 当使用innerText
设置文本时,IE和Chrome会将字符串中的换行符转换为HTML中的<br>
元素,这是Knockout所使用的。 Firefox doesn't have innerText
so Knockout uses textContent
, which doesn't do any conversion of the string. Firefox没有innerText
因此Knockout使用textContent
,它不对字符串进行任何转换。 (Interestingly, Chrome matches Firefox when you use the white-space: pre-wrap
style.) (有趣的是,当您使用white-space: pre-wrap
样式时,Chrome与Firefox相匹配。)
IE: IE浏览器:
<span>First line.<br>Second Line.<br> Third line preceded with 5 space characters.</span>
Chrome (without white-space style): Chrome(无空格):
<span>First line.<br>Second Line.<br> Third line preceded with 5 space characters.</span>
Firefox and Chrome (with white-space style): Firefox和Chrome(具有空白样式):
<span>First line.
Second Line.
Third line preceded with 5 space characters.</span>
If you want a javascript solution: http://jsfiddle.net/9KAQX/ 如果您要使用JavaScript解决方案,请访问: http : //jsfiddle.net/9KAQX/
The only advantage here is that "\\n" characters are not present in the span. 唯一的好处是跨度中不存在“ \\ n”字符。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.