ProFormTextArea 在 readonly的情况下，换行符会失效 🧐[问题 | question]

[HowCanLove]

🧐 问题描述 | Problem description

期望还是展示回车的。

💻 示例代码 | Sample code

<ProForm readonly initialValues={{ title: '12\n\n34\n56\n7\n89' }}> <ProFormText label="标题" name="title"></ProFormText> </ProForm>

🚑 其他信息 | Other information

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns.
此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

🧐 问题分析 | Problem Analysis

根据您的描述，您正在使用 Ant Design Pro 的 ProFormTextArea 组件，并且在 readonly 的情况下发现换行符失效。您希望在只读模式下仍然显示回车换行。

🌟 解决方案 | Solution

方案一：使用 pre 标签

您可以尝试在 ProFormTextArea 组件的值外面包裹一个 pre 标签，这样就可以保留换行符的显示。示例代码如下：

<ProFormTextarea readonly>
  <pre>{initialValues.title}</pre>
</ProFormTextarea>

方案二：使用 CSS white-space 属性

您可以使用 CSS 的 white-space 属性来处理换行符的显示。将 white-space 设置为 pre-wrap 可以在只读模式下保留换行符。示例代码如下：

<ProFormTextarea readonly style={{ whiteSpace: 'pre-wrap' }}>
  {initialValues.title}
</ProFormTextarea>

📖 相关文档 | Related Documentation

• ProFormTextArea - Ant Design Pro

希望这些解决方案对您有所帮助！如果您有任何疑问，请随时提问。