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

【问题标题】：How to prevent text overflow in card component in Ant designAnt设计中如何防止卡片组件中的文本溢出
【发布时间】：2021-01-08 16:13:31
【问题描述】：

我正在使用卡片组件来设计一张带有图片、标题和描述的卡片

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

问题在于，由于标题的长度很大，因此似乎会出现文本溢出。我尝试将自定义 JSX 添加到标题组件，但由于某种原因它不允许样式

沙盒链接SandBox Link

【问题讨论】：

标签： javascript antd ant-design-pro

【解决方案1】：

可以改变css。它使用一个类.ant-card-meta-title。在css文件中添加

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

【讨论】：

【解决方案2】：

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

【讨论】：

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