网页中\n换行符失效问题求助：如何实现文本换行显示？

我尝试生成包含多个JavaScript对象的字符串，将其设置为网页段落的textContent，希望每个对象单独显示在一行。原本以为只需在每个对象后添加\n换行符即可实现，但实际网页中并未生效，仅控制台输出能正常换行。

代码如下：

function stringifyObjects(objects) {    
    if (objects.length > 0) {
        str = objects.slice(0, 5).reduce( function (acc, o) { 
            return acc + " " + stringifyObject(o) + "\n"
        }, "") 
        if (objects.length > 5) {
            str = str + " and " + (objects.length - 5) + " more"
        }
        console.log(str)
        return str               
    } else {
        return "No objects to show"
    }    
}

function stringifyObject(object) {
    const content = JSON.stringify(object.content).replaceAll('"', '')
    return message.type + ": " + content 
}

paragraph.textContent = stringifyObjects(someObjects)

console.log()输出能正常显示每个对象单独一行，但段落中无换行效果。

原因 #

HTML的文本内容渲染规则中，\n、制表符、多个连续空格都会被浏览器合并为单个空格，只有<br>标签或者特定的CSS属性才能触发换行效果，这和控制台的文本解析规则不同。

解决方法 #

方法1：用CSS控制换行 #

给目标段落设置white-space属性，让浏览器识别\n为换行：

// 直接通过JS设置样式
paragraph.style.whiteSpace = "pre-line";

或者在CSS样式表中定义：

.your-paragraph-class {
  white-space: pre-line; /* 合并多余空格，保留\n换行 */
  /* 或者用white-space: pre-wrap; 保留空格和\n换行 */
}

这种方法无需修改字符串内容，适合希望保留textContent（避免XSS风险）的场景。

方法2：替换\n为<br>标签，使用innerHTML #

将字符串中的\n替换为HTML换行标签<br>，然后用innerHTML代替textContent赋值：

function stringifyObjects(objects) {    
    if (objects.length > 0) {
        str = objects.slice(0, 5).reduce( function (acc, o) { 
            return acc + " " + stringifyObject(o) + "<br>"
        }, "") 
        if (objects.length > 5) {
            str = str + " and " + (objects.length - 5) + " more"
        }
        console.log(str)
        return str               
    } else {
        return "No objects to show"
    }    
}

// 注意替换为innerHTML
paragraph.innerHTML = stringifyObjects(someObjects)

注意：如果字符串包含用户输入的内容，使用innerHTML可能存在XSS风险，建议先对内容进行转义。

额外修复 #

你的stringifyObject函数中存在错误：使用了未定义的message.type，应该改为object.type，否则会抛出引用错误：

function stringifyObject(object) {
    const content = JSON.stringify(object.content).replaceAll('"', '')
    return object.type + ": " + content 
}

内容的提问来源于stack exchange，提问作者Astarno