我正在尝试显示包含换行符和换行符的json字符串; \r
和\n
这是json:
{
"Content": "OFCH\r\nPVC Double Glazed Windows\r\nMains Services"
}
这是HTML:
<p class="PropertyBrochure__DescriptionContent" [innerHTML]="description.Content"></p>
这是输出:
OFCH PVC Double Glazed Windows Mains Services
正如您所看到的那样,json字符串中的\r\n
被剥离并被忽略。我错过了什么吗?
答案 0 :(得分:4)
回车既不剥离也不忽略。 Angular将解析HTML为:
<p class="PropertyBrochure__DescriptionContent">OFCH
PVC Double Glazed Windows
Mains Services</p>
问题是浏览器的HTML渲染器会折叠空白区域,并希望您使用<br>
元素来强制换行。
或者,您可以使用CSS控制浏览器对空格的处理(请参阅文档here):
.PropertyBrochure__DescriptionContent { white-space: pre; }
<p class="PropertyBrochure__DescriptionContent">OFCH
PVC Double Glazed Windows
Mains Services</p>