React TypeScript中长文本换行问题求助：添加\n无效

针对SVG <text>标签的解决方案 #

SVG的<text>元素不会自动识别\n实现换行，需要手动将文本拆分后用<tspan>标签包裹：

<text>
  {content.split('\n').map((line, index) => (
    <tspan key={index} x="0" dy={index === 0 ? 0 : "1.2em"}>
      {line}
    </tspan>
  ))}
</text>

• x="0" 确保每行文本对齐起始位置
• dy="1.2em" 控制行间距，可根据需求调整数值

针对普通HTML元素的解决方案 #

如果是用div、p这类普通HTML元素展示文本，只需添加white-space: pre-wrap样式，让浏览器识别\n并换行：

<div style={{ whiteSpace: 'pre-wrap' }}>
  {content}
</div>

该样式既会保留文本中的换行符，也会自动为过长文本换行。

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