本教程详细介绍了如何在 ant design card 组件中实现标题的多行显示，针对默认的标题截断问题，提供了两种实用的解决方案：通过在标题内容中直接插入 `
` 标签进行手动换行，以及利用 css 样式覆盖 ant design 默认行为，实现标题的自适应自动换行，以适应不同布局需求。
在 Ant Design 的 Card 组件中，当标题内容过长时，默认行为是将其截断并显示省略号（...），以保持布局的整洁。然而，在许多实际应用场景中，我们可能需要让长标题自动换行，而不是被截断，尤其是在响应式布局下，标题应能根据可用空间动态调整显示。本教程将提供两种实现 Ant Design Card 标题多行显示的方法，并探讨它们的适用场景。
Ant Design Card 标题截断问题解析
Ant Design 的 Card 组件内部对标题（通过 title 属性传入）进行了样式处理，通常会应用 white-space: nowrap; 和 text-overflow: ellipsis; 等 CSS 属性，导致标题在一行内显示，超出部分则以省略号表示。这种设计在标题简短时非常美观，但对于需要展示完整信息的长标题则显得不便。
import { Card, Col, Row } from 'antd';
function App() {
return (
<Row gutter={24}>
<Col xs={24} md={10}>
<Card
title={<span>这个标题内容很长，它应该在需要的时候自动换行而不是显示省略号...</span>}
bodyStyle={{ paddingTop: 5 }}
>
<p>卡片描述内容</p>
</Card>
</Col>
</Row>
);
}上述代码中，如果标题字符串足够长，您会发现它被截断了。接下来，我们将介绍如何解决这个问题。
方法一：使用 <br/> 标签进行手动换行
最直接且简单的方法是在标题内容中需要换行的位置手动插入 HTML 的 <br/> 标签。这种方法适用于您明确知道标题应该在何处断开，并且换行点是固定不变的场景。
实现方式
将您希望换行的内容拆分为多段，并在中间插入 <br/> 标签。由于 Card 的 title 属性可以接受 React 节点，因此可以直接在 <span> 内部使用 <br/>。
import { Card, Col, Row } from 'antd';
function App() {
return (
<Row gutter={24}>
<Col xs={24} md={10}>
<Card
title={
<span>
这是标题的第一行
<br />
这是标题的第二行内容
</span>
}
bodyStyle={{ paddingTop: 5 }}
>
<p>卡片描述内容</p>
</Card>
</Col>
</Row>
);
}适用场景与局限性
-
适用场景： 当标题内容有明确的逻辑分段，且这些分段在任何屏幕尺寸下都应保持不变时。例如，显示“姓名
职位”这类固定格式。 - 局限性： 这种方法是非动态的。它无法根据卡片的宽度或屏幕尺寸自动调整换行。如果卡片宽度变化，您可能需要手动调整 <br/> 的位置，这在响应式设计中很不灵活。
方法二：通过 CSS 样式实现标题自适应换行
为了实现标题根据可用空间自动换行，我们需要覆盖 Ant Design Card 标题的默认 CSS 样式。这涉及到解除 white-space: nowrap; 和 text-overflow: ellipsis; 这两个属性的限制。
实现方式
Ant Design Card 标题的文本通常包裹在一个具有特定类名（例如 .ant-card-head-title）的元素中。我们可以通过针对这个类名应用自定义 CSS 样式来覆盖其默认行为。
/* 在您的全局样式文件或组件样式中添加 */
.ant-card-head-title {
white-space: unset !important; /* 允许文本换行 */
text-overflow: unset !important; /* 禁用文本溢出省略号 */
}将上述 CSS 代码添加到您的项目中。如果是在一个 React 组件中使用，您可以将其放在全局样式文件（如 index.css 或 App.css）中，或者使用 CSS Modules/Styled Components 等方式进行局部作用域化。
示例代码
假设您已经将上述 CSS 添加到项目中，您的 React 组件代码无需更改 title 属性的结构：
import { Card, Col, Row } from 'antd';
// 确保您的样式文件已被引入，例如：
// import './App.css'; // 假设 .ant-card-head-title 的样式定义在 App.css 中
function App() {
return (
<Row gutter={24}>
<Col xs={24} md={10}>
<Card
title={<span>这个标题内容很长，它应该在需要的时候自动换行而不是显示省略号...</span>}
bodyStyle={{ paddingTop: 5 }}
>
<p>卡片描述内容</p>
</Card>
</Col>
</Row>
);
}应用了上述 CSS 后，当卡片宽度不足以容纳整个标题时，标题将自动换行显示，而不是被截断。
适用场景与注意事项
适用场景： 推荐用于大多数需要标题自适应换行的场景，尤其是在响应式布局中。它能根据可用空间动态调整标题的显示，提供更好的用户体验。
!important 的使用： 由于 Ant Design 组件的样式通常具有较高的特异性，我们可能需要使用 !important 来确保我们的自定义样式能够覆盖默认样式。
-
样式作用域： 如果您不希望这个样式影响到项目中所有的 Ant Design Card 标题，您应该考虑对 CSS 进行作用域化。例如，为包含 Card 的父元素添加一个特定的类名，然后通过组合选择器来应用样式：
/* 仅影响 .my-custom-card-wrapper 内的 Card 标题 */ .my-custom-card-wrapper .ant-card-head-title { white-space: unset !important; text-overflow: unset !important; }然后在 JSX 中：
<div className="my-custom-card-wrapper"> <Card title={/* ... */} /> </div>
总结与选择建议
在 Ant Design Card 中实现标题的多行显示，您可以根据具体需求选择以下两种方法：
- 手动换行 (<br/> 标签)： 适用于标题内容有固定分段点，且不随布局变化的场景。实现简单直接，但缺乏灵活性。
- CSS 样式覆盖 (.ant-card-head-title)： 推荐用于需要标题自适应换行，并根据可用空间动态调整显示的场景。这种方法更加灵活和响应式，但可能需要使用 !important 并注意样式作用域，以避免全局影响。
对于大多数现代 Web 应用，尤其是需要良好响应式体验的应用，通过 CSS 样式覆盖实现标题的自适应换行是更优的选择。它能够提供更流畅和专业的视觉效果，同时减少了手动维护的成本。
