React 中使 Button 显示多行文本

即支持文本中的换行符，例如，后台接口返回的 message 是：

暴击 \n 100000 倍

需要能解析其中的换行符。

实际上只需要加上一行 css

style={{ "white-space": "pre-line" }}

例如：

<Button
  key={index}
  onClick={CardButtonOnClick(ctx)}
  value={item.payload}
  style={{ margin: "5px", "white-space": "pre-line" }}
>
  {item.title}
</Button>

css 中 “white-space: pre-line” 作用是什么

CSS 的 white-space 属性用于控制元素中空白符（包括空格、制表符、换行符等）的处理方式。其中，pre-line 值表示元素中的空白符会被保留，但换行符会被解释为换行。

具体作用：

1. 保留元素中的空白符，不会将连续的空格或制表符合并成一个空格。
   
2. 将换行符解释为换行，即遇到换行符就换行，而不是将其视为一个空格。

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式