Material-UI CardContent无法渲染字符串换行问题如何解决？

问题原因 #

HTML默认会将字符串中的换行、连续空格等空白字符合并为单个空格，所以你字符串里的\n换行符在页面渲染时会被自动忽略，控制台输出不受这个规则限制所以可以正常显示换行。你之前第一种写法用了noWrap属性，本身就会强制文本不换行，也会导致换行失效。

解决方案 #

方案1：CSS控制空白字符规则（最推荐） #

给Typography组件添加whiteSpace样式，无需修改原字符串：

<Card>
  <CardContent>
     {/* 删掉noWrap属性，添加whiteSpace样式 */}
     <Typography style={{ whiteSpace: 'pre-line' }}>{value}</Typography>
  </CardContent>
</Card>

常用的whiteSpace取值说明：

• pre-line：保留换行符，合并连续空格，内容超出容器宽度时自动换行
• pre-wrap：保留换行符和连续空格，内容超出容器宽度时自动换行
• pre：完全保留所有空白格式，内容超出不会自动换行，只有遇到换行符才会换行

方案2：替换换行符为<br/>标签 #

如果需要更灵活的控制换行逻辑，可以把字符串中的\n替换为HTML换行标签，通过dangerouslySetInnerHTML渲染：

<Card>
  <CardContent>
     <Typography 
       dangerouslySetInnerHTML={{
         __html: value.replaceAll('\n', '<br />')
       }}
     />
  </CardContent>
</Card>

注意：如果value是用户可输入的内容，使用这个方案前需要先做XSS过滤，避免安全问题。

方案3：分割字符串逐行渲染 #

把字符串按换行符切割为数组，逐行渲染并手动添加换行标签：

<Card>
  <CardContent>
    <Typography>
      {value.split('\n').map((line, index) => (
        <span key={index}>
          {line}
          <br />
        </span>
      ))}
    </Typography>
  </CardContent>
</Card>

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