要在HTML中显示的带有新行和制表符的字符串

String with new line and tabs to display in HTML

本文关键字：新行 制表符 字符串 HTML 显示 要在      更新时间：2023-09-26

我有一个来自java后端的字符串，它被格式化为以某种方式显示，新行、制表符和空格字符位于特定位置。

如何使其在HTML中以相同的方式显示？

例如，假设我在Javascript中有当前字符串：

var str = "'t'tTitle 'n Some text 't't't more text";

浏览器通常会去掉多余的空白，您可能需要将其放在预先格式化的文本块中或使用white-space: pre

var pre = document.createElement("pre");
pre.innerHTML = str;
document.appendChild(pre);

同样是的，你也需要使用后拉法，如前所述。

我可能会迟到，但只是为了在像我这样的初学者面临这种问题时提供帮助。

您可以将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}"

<p class="response-title">{{myData?.title}}</p>

和css

.response-title {
white-space:pre;

}

这个做得很完美。

您也可以使用textarea。这是一个正在工作的Fiddle

MDN文本区域

相关文章：