如何在模版的按钮中给文本断行

我正在使用antd和ReactJS来创建一个带有自定义按钮的模式。这些按钮的文本可以从用户那里改变。

我注意到，如果提供一个非常大的文本，但作为一个字，它总是会超过按钮的大小/模态的大小，使事情看起来很糟糕。尽管对于用户来说，把按钮的文字设置成那么长可能只是一个非常小的情况，但我还是想知道如何处理它。

我做了一个小小的搜索，并尝试了一些解决方案，这些解决方案来自《如何创建带断行的按钮》。

但当我试图断开它时，我得到的是这样的结果

这是我在模态中使用的代码：

         <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"> {disagree} </Button>
                    </Popconfirm>
                    <Button type='primary' key="agree" onClick={onAgree}>{agree}</Button>
                </Fragment>
            ]}>
            <RichText value={content}/>
        </Modal>