掌握 Ant Design Card 标题多行显示与自适应换行技巧

本教程详细介绍了如何在 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 属性的结构：

Cowriter

AI 作家，帮助加速和激发你的创意写作

107

查看详情

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 中实现标题的多行显示，您可以根据具体需求选择以下两种方法：

1. 手动换行 (<br/> 标签)： 适用于标题内容有固定分段点，且不随布局变化的场景。实现简单直接，但缺乏灵活性。
2. CSS 样式覆盖 (.ant-card-head-title)： 推荐用于需要标题自适应换行，并根据可用空间动态调整显示的场景。这种方法更加灵活和响应式，但可能需要使用 !important 并注意样式作用域，以避免全局影响。

对于大多数现代 Web 应用，尤其是需要良好响应式体验的应用，通过 CSS 样式覆盖实现标题的自适应换行是更优的选择。它能够提供更流畅和专业的视觉效果，同时减少了手动维护的成本。

以上就是掌握 Ant Design Card 标题多行显示与自适应换行技巧的详细内容，更多请关注php中文网其它相关文章！