在Element.TextContent中键入换行符

Question

我正在尝试在Web应用程序中生成文本内容。我希望文本显示在标题元素<h1>中，但文本必须包含换行符。

首次尝试

var el = document.getElementById("myel");
var newline = "\r\n";
var nbsp = "\u00a0";
el.textContent = "My awesome" + newline + "web" + nbsp + "application";

这不起作用。我的意思是在开发人员工具中，通过检查DOM，我可以看到文本在"awesome"和"web"之间被破坏，但浏览器没有这样呈现：文本全部在同一行但至少非breaing空间（正确呈现为&nbsp）就在那里。

尝试<br/>。

如果我尝试使用<br/>，我必须使用innerHTML：

var el = document.getElementById("myel");
var newline = "<br/>";
var nbsp = "&nbsp";
el.innerHTML = "My awesome" + newline + "web" + nbsp + "application";

所以我无法使用textContent解决问题？我真的很想避免innerHTML。

Answer 1

将CSS white-space: pre;与"\r\n"：

一起使用

var el = document.getElementById("myel");
var newline = "\r\n";
var nbsp = "\u00a0";
el.textContent = "My awesome" + newline + "web" + nbsp + "application";

#myel {
  white-space: pre;
}

<h1 id="myel"></h1>