我有一个字符串来自我的java后端，它被格式化为以某种方式显示，新的行，制表符和空格字符在某些位置。如何让它在HTML中以相同的方式显示？例如，假设我在JavaScript中有当前字符串，如下所示：var str = "\t\tTitle \n Some text \t\t\t more text";
var str = "\t\tTitle \n Some text \t\t\t more text";
aurhwmvo1#
浏览器通常会去掉多余白色，您可能需要将其放入预先格式化的文本块中或使用white-space: pre
white-space: pre
var pre = document.createElement("pre"); pre.innerHTML = str; document.appendChild(pre);
另外，是的，你也需要使用backslahes，如前所述。
nxagd54h2#
我可能会迟到，但只是为了帮助像我这样的初学者面临这种问题。您可以将CSS类添加到要显示数据的HTML标记中。在我的例子中，我使用Angular 2的ngFor。来自后端的数据有换行符和制表符。因此，我只是添加了一个类的html标记与css白间距风格如下。后端数据"title": "postIssueResponse() {\n\tthis.parent.postIssueResponse(this.issueId, this.newResponse);\n console.log(this.newResponse);\n this.newResponse \u003d \"\";\n}"
"title": "postIssueResponse() {\n\tthis.parent.postIssueResponse(this.issueId, this.newResponse);\n console.log(this.newResponse);\n this.newResponse \u003d \"\";\n}"
<p class="response-title">{{myData?.title}}</p>
和css
.response-title { white-space:pre;
}这一个做的工作完美。
vx6bjr1n3#
也可以使用textarea。这是一个Working FiddleMDN textarea
textarea
8aqjt8rx4#
您可以使用
white-space: pre-wrap;
因为它还防止溢出
4条答案
按热度按时间aurhwmvo1#
浏览器通常会去掉多余白色，您可能需要将其放入预先格式化的文本块中或使用
white-space: pre另外，是的，你也需要使用backslahes，如前所述。
nxagd54h2#
我可能会迟到，但只是为了帮助像我这样的初学者面临这种问题。
您可以将CSS类添加到要显示数据的HTML标记中。在我的例子中，我使用Angular 2的ngFor。来自后端的数据有换行符和制表符。因此，我只是添加了一个类的html标记与css白间距风格如下。
后端数据
"title": "postIssueResponse() {\n\tthis.parent.postIssueResponse(this.issueId, this.newResponse);\n console.log(this.newResponse);\n this.newResponse \u003d \"\";\n}"和css
}
这一个做的工作完美。
vx6bjr1n3#
也可以使用
textarea。这是一个Working FiddleMDN textarea
8aqjt8rx4#
您可以使用
因为它还防止溢出