在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"之间被打断，但浏览器没有以这种方式呈现：文本都在同一行，但至少非换行空格（正确呈现为&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。

- Andry

---

\r\n符号只在代码视图模式下可见。它是用于代码换行而不是HTML的换行。据我所知，您无法通过设置元素的“textContent”来创建换行符。只有当文本到达行末时才会出现换行符。 - iamawebgeek

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>

- Rick Hitchcock

---

如果您不想在CSS文件中进行更改，您也可以使用JavaScript来实现这一点，方法是使用 el.style.whiteSpace = "pre";。 - Chirag Bhatia - chirag64

很棒的技巧。我喜欢这个。 - iamawebgeek