从JavaScript后端推送数据时如何实现HTML文本换行显示

现有JavaScript代码中，formatPopupBodyText函数生成的文本在HTML页面中显示为单行：

We are open from Monday to Friday from 9am to 6pm. Contact us at 80004001. (Call to the national network).

尝试添加\n及<br/>实现换行均无效，期望实现如下换行效果：

We are open from Monday to Friday from 9am to 6pm.

Contact us at 80004001.

(Call to the national network).

原代码 #

formatPopupBodyText(serverPayload) {
let result = this.formatBusinessHoursText(serverPayload);
    if (serverPayload.PhoneNumbers__c != null && getCurrentCountryCode() === 'IN' && (this.brandName == 'HYN' || this.brandName == 'SUZ')) {
        result += `. ${LABEL_NATIONALNETWORK} `;
    }
    this.popupBodyText = result;
}

尝试修改后的代码 #

formatPopupBodyText(serverPayload) {
let result = this.formatBusinessHoursText(serverPayload);
    if (serverPayload.PhoneNumbers__c != null && getCurrentCountryCode() === 'IN' && (this.brandName == 'HYN' || this.brandName == 'SUZ')) {
        result += `\n ${LABEL_NATIONALNETWORK} `; //put "\n" and tried with "<br/>" as well
    }
    this.popupBodyText = result;
}

解决方法 #

问题核心在于文本的渲染方式和字符串拼接逻辑，以下是两种可行方案：

方案1：用HTML标签+HTML插值渲染

1. 先修改JS代码，在需要换行的位置插入<br/>标签：

formatPopupBodyText(serverPayload) {
    // 假设formatBusinessHoursText返回的是不带末尾句号的营业时间文本
    let result = `${this.formatBusinessHoursText(serverPayload)}.<br/>`;
    if (serverPayload.PhoneNumbers__c != null && getCurrentCountryCode() === 'IN' && (this.brandName == 'HYN' || this.brandName == 'SUZ')) {
        result += `Contact us at ${serverPayload.PhoneNumbers__c}.<br/>`;
        result += `(${LABEL_NATIONALNETWORK})`;
    }
    this.popupBodyText = result;
}

2. 确保页面渲染时用HTML解析模式：
   • Vue项目：用v-html="popupBodyText"替代普通的{{ popupBodyText }}文本插值
   • React项目：用dangerouslySetInnerHTML={{ __html: popupBodyText }}渲染

方案2：用CSS解析换行符

如果不想修改渲染方式，也可以保留\n换行符，给渲染文本的HTML元素添加CSS样式：

.popup-body-text {
    white-space: pre-line;
}

这种样式会让HTML自动将字符串中的\n解析为换行，同时自动合并多余空格，适合不想改动太多JS逻辑的场景。

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