Javascript Ant设计中如何防止卡片组件中的文本溢出

我正在使用卡片组件设计一张带有图像、标题和说明的卡片

<div>
            <Card
                hoverable
                style={{ width: 700, wordWrap: 'break-word'}}
                cover={<img alt="example" src={ urlToImage } />}
            >
                <Meta title={ title } description={ content } />
            </Card>
        </div>

问题是，由于标题的长度很大，它似乎会在同一个页面上出现文本溢出。 我尝试将自定义JSX添加到title组件中，但由于某些原因，它不允许设置样式

---

指向沙盒的链接可以更改css。它使用类

.ant卡元标题

。在css文件中添加

.ant-card-meta-title {
  white-space: pre-line;
}

---

可以更改css。它使用类

.ant卡元标题

。在css文件中添加

.ant-card-meta-title {
  white-space: pre-line;
}

---

请不要只发布代码作为答案，还要解释代码的作用以及它是如何解决问题的。带有解释的答案通常更有帮助，质量更好，并且更有可能吸引更多的投票。请不要只发布代码作为答案，还要解释代码的作用以及它如何解决问题。带有解释的答案通常更有帮助，质量更好，更容易吸引选票。