html - 设计一个大的 JSON 字符串以多行显示而不是 1 大行

Question

我想在 AngularJS 应用程序页面的底部显示所有绑定(bind)。所以在页面的末尾(正文内)我放了一个 {{vm}}它非常正确地显示了所有字符串。

例如。 {"section":"b","b1anow":"","b1bnow":"","b1cnow":"","b1dnow":"","b1nowpoints":100,"b1ashould":"","b1bshould":"","b1cshou" }

但是当字符串变得非常大时，行不会中断，它会继续到 1 非常非常大的行，超出范围(超出 HTML 元素保持 1 行而不是在父元素内换行)。

我试过了 <pre>{{vm}}</pre>但它仍然有相同的输出。我相信这样做是因为没有空格字符，但我不确定。

我怎样才能把{{vm}}所以它分成多行并包装在父 html 元素中？

我不是在寻找美化的 javascript 或其他任何东西。这不是我要问的。还有 word-wrap:break-word;不起作用，我添加了但什么也没发生。

我试过了 <div style="word-break: break-all;">
{{vm}}
</div>

但不起作用，仍然是 1 行。

Answer 1

vm.replace(/([{},:])/g, ' $1 ')

例如:

'{"k1":"v1","k2":"v2"}'.replace(/([{},:])/g, ' $1 ')

会回来

 { "k1" : "v1" , "k2" : "v2" } 

有了这些额外的空格，您的 JSON 就可以毫无问题地换行。