如何实现Antd Modal按钮内长文本自动换行？

我在使用Antd和ReactJS开发带自定义按钮的Modal时，遇到了一个极端场景问题：当用户输入超长单词语本作为按钮文本时，文本会直接溢出按钮边界，甚至超出Modal范围，严重影响显示效果。

一开始尝试常规的换行方案，但效果不理想。最终通过给按钮添加以下CSS属性解决了问题：

• wordBreak: 'break-all'：强制超长单词在任意字符处换行
• whiteSpace: 'normal'：取消按钮默认的不换行规则
• height: 'fit-content'：让按钮高度自适应多行文本的实际高度

修改后的Modal代码如下：

import { Modal, Button, Popconfirm, Fragment } from 'antd';
// 假设RichText是你的自定义富文本组件
import RichText from './RichText';

// 组件内部逻辑
<Modal
  title={'Consent'}
  closable={false}
  width='100vw'
  visible={visible}
  onCancel={onDisagree}
  footer={[
    <Fragment key="consentButtons">
      <Popconfirm
        placement="topRight"
        title="Do you want to continue?"
        onConfirm={onDisagree}
        okText="Yes"
        cancelText="No"
      >
        <Button 
          type='ghost' 
          key="disagree"
          style={{ wordBreak: 'break-all', whiteSpace: 'normal', height: 'fit-content' }}
        > 
          {disagree} 
        </Button>
      </Popconfirm>
      <Button 
        type='primary' 
        key="agree" 
        onClick={onAgree}
        style={{ wordBreak: 'break-all', whiteSpace: 'normal', height: 'fit-content' }}
      >
        {agree}
      </Button>
    </Fragment>
  ]}>
  <RichText value={content}/>
</Modal>

如果需要全局统一处理这类自定义按钮，也可以把样式抽成独立的CSS类，通过className绑定，避免重复写内联样式。

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