弹窗中使用\n作为换行标记时，文本未正常实现换行的问题

在弹窗组件中使用\n作为文本换行标记时，内容无法按照预期生成新行完成断行，所有拼接的文本会集中在同一行展示。

关联参考代码示例 #

data.forEach((element) => {
  dataClean.push({
    position: { lng: element.Longitude, lat: element.Latitude },
    text: priceData(element)
  });
}); 

function priceData(element) {
  let labelText = `No.: ${element.Number}, ${element.Bedrooms} rooms\n
  ${element.Address}\n\n`;
  const data = element.history;
  data[0].forEach((element, indx) => {
    labelText = `${labelText} ∙ ${element}: ${data[1][indx]} \n`;
  });

  labelText = `${labelText}\n${element.days} days\nstatus: ${element.status}`;

  return labelText;
}

常用修复方案 #

• 多数弹窗组件基于HTML渲染逻辑展示文本，浏览器默认会将字符串内的\n识别为普通空白字符，不会主动转换为换行效果
• 可给弹窗的文本展示容器添加white-space: pre-lineCSS样式，让浏览器自动识别字符串中的换行符\n并渲染为换行效果
• 若组件支持富文本渲染模式，可将拼接字符串时使用的\n替换为<br>换行标签，适配富文本的渲染规则
• 若使用的是地图类组件的信息弹窗（如各类地图SDK的Popup组件），需手动检查组件的文本渲染配置，部分组件默认不开启纯文本换行识别能力

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