Ant Design Descriptions组件文本换行失效，替换<br/>无效求助

问题原因 #

1. React 默认会转义字符串中的 HTML 标签，直接写 <br/> 会被当作纯文本显示。
2. Descriptions.Item 内部存在默认嵌套元素，你的 white-space: pre-wrap 样式可能没有正确作用到文本节点上。

方案一：修复 CSS 样式，让 \n 生效 #

Ant Design 的 Descriptions.Item 会把内容渲染到内部的 .ant-descriptions-item-content 元素中，需要确保样式优先级足够：

.pre .ant-descriptions-item-content {
  white-space: pre-wrap;
  display: block; /* 确保块级元素的换行规则生效 */
}

确认你的 text 变量已正确包含 \n，应用该样式后即可实现换行。

方案二：用 dangerouslySetInnerHTML 渲染 <br/> #

若倾向于用 <br/> 换行，可通过该属性将字符串转为 HTML 片段渲染：

1. 修改文本生成逻辑：

let text = '';
for (const [, value] of Object.entries(record)) {
  text += value + '<br/>';
}

2. 组件内渲染：

<Col className='m_right' span={13}>
  <Descriptions.Item>
    <div dangerouslySetInnerHTML={{ __html: text }} />
  </Descriptions.Item>
</Col>

⚠️ 注意：如果 record 中的值来自用户输入，需先对内容做转义处理，避免 XSS 攻击。

方案三：拆分每个值为独立元素（最安全） #

直接将每个字段值作为单独元素渲染，自然实现换行，无需依赖 CSS 或 HTML 转义：

<Col className='m_right' span={13}>
  <Descriptions.Item className='pre'>
    {Object.values(record).map((value, idx) => (
      <div key={idx}>{value}</div>
    ))}
  </Descriptions.Item>
</Col>

这种方式符合 React 组件化思想，样式控制更灵活，也不存在安全风险。

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