通过\r\n拼接的API告警消息在页面无法正常显示换行的问题

这个问题挺常见的——控制台能正确识别\r\n换行，但页面渲染时却直接忽略了它们，本质原因是浏览器处理文本的规则和终端不一样：浏览器默认会把所有空白字符（包括换行、多个空格）合并成单个空格，所以直接渲染带\r\n的字符串自然不会换行。

给你两种适配你代码场景的简单解决方案：

方案1：用CSS属性强制解析换行 #

这是最简洁的方法，只需要给渲染文本的元素添加white-space: pre-line样式，它会保留换行符，同时自动合并多余的空格，显示效果更自然。

修改你的Typography组件代码：

{props.message && (
  <StyledTextBox data-testid={props.messageTestId} maxWidth="80%">
    <Typography 
      variant="paragraph" 
      style={{ whiteSpace: 'pre-line' }} // 新增这行样式
    >
      {props.message}
    </Typography>
  </StyledTextBox>
)}

方案2：手动将换行符替换为<br>标签 #

如果你需要更精细的控制（比如给不同行加自定义样式），可以把字符串按\r\n分割成数组，然后在每一行之间插入<br>标签：

{props.message && (
  <StyledTextBox data-testid={props.messageTestId} maxWidth="80%">
    <Typography variant="paragraph">
      {props.message.split('\r\n').map((line, index) => (
        <React.Fragment key={index}>
          {line}
          {/* 最后一行不要加<br>避免多余空白 */}
          {index !== props.message.split('\r\n').length - 1 && <br />}
        </React.Fragment>
      ))}
    </Typography>
  </StyledTextBox>
)}

补充说明 #

控制台能正常显示换行是因为终端环境会直接解析\r\n这类转义字符，而HTML的文本渲染遵循自己的空白处理规则，所以必须通过CSS或者标签转换来让换行生效。

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