将换行符写入<span>元素

Writing line breaks to a <span> element using JavaScript?

本文关键字：span gt 元素 换行符 lt      更新时间：2023-09-26

我的目标是获取一个数组，并使用<span>元素将每个元素写入HTML页面，.textContent使用for循环。唯一的问题是：

Error1
Error2

我得到：

Error1<br/>Error2<br/>

HTML代码：

<p><span id="EBox"></span></p>

JS代码：

var EBox = document.getElementById("EBox");
var eArray = []; //Elements get added via push
for (var i = 0; i < eArray.length; i++) {
    EBox.textContent = EBox.textContent + eArray[i] + '<br/>';
}

整个系统是有效的，但最终只是一句混乱的话。我可以更改什么来添加换行符？我尝试过'<br>'、'<br />'和''n'，结果相似。

使用.innerHTML.insertAdjacentHTML而不是.textContent，因为.textContent不会解析HTML <br>，只是将其作为文本输出。

此外，如果每次都要附加到HTML，最好使用.insertAdjacentHTML，因为它不会重新分析以前的HTML，因此它比.innerHTML更快、更不容易出错。

var strArr = ['foo', 'bar'];
strArr.forEach(function(str) {
  document.querySelector('div').insertAdjacentHTML('beforeend', str + '<br>');
});
<div></div>

使用.innerHTML而不是.textContent。

我还建议在使用.innerHTML之前先构建一个字符串，这样就不会每次都重建DOM。。。

var EBox = document.getElementById("EBox");
var eArray = []; //Elements get added via push
var html = "";    
for (var i = 0; i < eArray.length; i++) {
    html += eArray[i] + '<br/>';
}
EBox.innerHTML = html;

我在这里找到了一个更好的答案：

https://developer.mozilla.org/pt-BR/docs/Web/CSS/word-break

您可以使用CSS来完成此操作，请参阅以下内容：

span{word-break: break-word;}

或

span{word-break: break-all;}

BREAKE-WORD将把下一个单词放在新行中，当内容变得比div或span容器大时，BREAKE-ALL将打断文本以证明内容的合理性。

我希望我能帮忙：）

相关文章：