Question

我在填写该标题时遇到了一些麻烦，但我的问题是，当我解析为html时，我的JSON字典中字符串中的\ n字符无效。

＆＃13;

var exp = {
"globalRunInfo" : {
		"file" : "file/path/goes/here", 
    "info" : "random junk here",
    "copyright" : "this is where I am getting my problem \n the newline doesn't work \n so all this gets formatted as one line"
	  }
}

ko.applyBindings(exp);

＆＃13;

<!DOCTYPE html>
<html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="with: globalRunInfo">
  <p data-bind="text: file"></p>
  <p>SOMETHING</p> 
  <p data-bind="text: info"></p>
  <span data-bind="text: copyright"></span>
</div>

</html>

＆＃13;

有谁知道如何解决这个问题？我试图避免编写一个检查换行符的函数，并用断点或其他东西替换它们。对于我曾经使用过的东西，我做了很多工作。

Answer 1

尝试在white-space: pre-wrap元素上设置CSS属性span。这将导致新线字符的制动。

<span style="white-space: pre-wrap" data-bind="text: copyright"></span>

Answer 2

您可以为该区域分配一个班级并使用white-space: pre-wrap

取自white-space documentation：

pre-wrap
Sequences of whitespace are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

此外，您还可以在\n之后删除多余的空格，这样就不会将空间添加到新行的前面。

＆＃13;

var exp = {
"globalRunInfo" : {
		"file" : "file/path/goes/here", 
    "info" : "random junk here",
    "copyright" : "this is where I am getting my problem \nthe newline doesn't work \nso all this gets formatted as one line"
	  }
}

ko.applyBindings(exp);

＆＃13;

.example{
  white-space: pre-wrap;
}

＆＃13;

<!DOCTYPE html>
<html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="with: globalRunInfo">
  <p data-bind="text: file"></p>
  <p>SOMETHING</p> 
  <p data-bind="text: info"></p>
  <span class="example" data-bind="text: copyright"></span>
</div>

</html>

＆＃13;

Answer 3

用pre标签包裹整个json文本。它与我合作

解析为JSON字符串对象时，换行符不起作用

3 个答案: